@tamagui/accordion 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/Accordion.native.js

@@ -1,497 +1,411 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { View, createRefComponent, createStyledContext, createStyledHOC, styled } from "@tamagui/core";
 import { Collapsible } from "@tamagui/collapsible";
 import { createCollection } from "@tamagui/collection";
 import { useComposedRefs } from "@tamagui/compose-refs";
 import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { View, createStyledContext, styled } from "@tamagui/core";
 import { composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
 import { YStack } from "@tamagui/stacks";
 import { H1 } from "@tamagui/text";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import { useDirection } from "@tamagui/use-direction";
 import * as React from "react";
+
 var ACCORDION_NAME = "Accordion";
-var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+var ACCORDION_KEYS = [
+	"Home",
+	"End",
+	"ArrowDown",
+	"ArrowUp",
+	"ArrowLeft",
+	"ArrowRight"
+];
 var [Collection, useCollection] = createCollection(ACCORDION_NAME);
 var ACCORDION_CONTEXT = "Accordion";
-var AccordionComponent = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    type,
-    ...accordionProps
-  } = props;
-  var singleProps = accordionProps;
-  var multipleProps = accordionProps;
-  return /* @__PURE__ */_jsx(Collection.Provider, {
-    scope: props.__scopeAccordion || ACCORDION_CONTEXT,
-    children: type === "multiple" ? /* @__PURE__ */_jsx(AccordionImplMultiple, {
-      ...multipleProps,
-      ref: forwardedRef
-    }) : /* @__PURE__ */_jsx(AccordionImplSingle, {
-      ...singleProps,
-      ref: forwardedRef
-    })
-  });
+var AccordionComponent = createRefComponent(function(props, forwardedRef) {
+	var { type, ...accordionProps } = props;
+	var singleProps = accordionProps;
+	var multipleProps = accordionProps;
+	return /* @__PURE__ */ jsx(Collection.Provider, {
+		scope: props.__scopeAccordion || ACCORDION_CONTEXT,
+		children: type === "multiple" ? /* @__PURE__ */ jsx(AccordionImplMultiple, {
+			...multipleProps,
+			ref: forwardedRef
+		}) : /* @__PURE__ */ jsx(AccordionImplSingle, {
+			...singleProps,
+			ref: forwardedRef
+		})
+	});
 });
 AccordionComponent.displayName = ACCORDION_NAME;
-AccordionComponent.propTypes = {
-  type(props) {
-    var value = props.value || props.defaultValue;
-    if (props.type && !["single", "multiple"].includes(props.type)) {
-      return new Error("Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.");
-    }
-    if (props.type === "multiple" && typeof value === "string") {
-      return new Error("Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.");
-    }
-    if (props.type === "single" && Array.isArray(value)) {
-      return new Error("Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.");
-    }
-    return null;
-  }
-};
-var {
-  Provider: AccordionValueProvider,
-  useStyledContext: useAccordionValueContext
-} = createStyledContext();
-var {
-  Provider: AccordionCollapsibleProvider,
-  useStyledContext: useAccordionCollapsibleContext
-} = createStyledContext();
-var AccordionImplSingle = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    value: valueProp,
-    defaultValue,
-    control,
-    onValueChange = function () {},
-    collapsible = false,
-    ...accordionSingleProps
-  } = props;
-  var [value, setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue || "",
-    onChange: onValueChange
-  });
-  return /* @__PURE__ */_jsx(AccordionValueProvider, {
-    scope: props.__scopeAccordion,
-    value: value ? [value] : [],
-    onItemOpen: setValue,
-    onItemClose: React.useCallback(function () {
-      return collapsible && setValue("");
-    }, [setValue, collapsible]),
-    children: /* @__PURE__ */_jsx(AccordionCollapsibleProvider, {
-      scope: props.__scopeAccordion,
-      collapsible,
-      children: /* @__PURE__ */_jsx(AccordionImpl, {
-        ...accordionSingleProps,
-        ref: forwardedRef
-      })
-    })
-  });
+AccordionComponent.propTypes = { type(props) {
+	var value = props.value || props.defaultValue;
+	if (props.type && !["single", "multiple"].includes(props.type)) {
+		return new Error("Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.");
+	}
+	if (props.type === "multiple" && typeof value === "string") {
+		return new Error("Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.");
+	}
+	if (props.type === "single" && Array.isArray(value)) {
+		return new Error("Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.");
+	}
+	return null;
+} };
+var { Provider: AccordionValueProvider, useStyledContext: useAccordionValueContext } = createStyledContext();
+var { Provider: AccordionCollapsibleProvider, useStyledContext: useAccordionCollapsibleContext } = createStyledContext();
+var AccordionImplSingle = createRefComponent(function(props, forwardedRef) {
+	var { value: valueProp, defaultValue, control, onValueChange = function() {}, collapsible = false, ...accordionSingleProps } = props;
+	var [value, setValue] = useControllableState({
+		prop: valueProp,
+		defaultProp: defaultValue || "",
+		onChange: onValueChange
+	});
+	return /* @__PURE__ */ jsx(AccordionValueProvider, {
+		scope: props.__scopeAccordion,
+		value: value ? [value] : [],
+		onItemOpen: setValue,
+		onItemClose: React.useCallback(function() {
+			return collapsible && setValue("");
+		}, [setValue, collapsible]),
+		children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, {
+			scope: props.__scopeAccordion,
+			collapsible,
+			children: /* @__PURE__ */ jsx(AccordionImpl, {
+				...accordionSingleProps,
+				ref: forwardedRef
+			})
+		})
+	});
 });
-var AccordionImplMultiple = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    value: valueProp,
-    defaultValue,
-    onValueChange = function () {},
-    ...accordionMultipleProps
-  } = props;
-  var [value, setValue] = useControllableState({
-    prop: valueProp,
-    defaultProp: defaultValue || [],
-    onChange: onValueChange
-  });
-  var handleItemOpen = React.useCallback(function (itemValue) {
-    return setValue(function () {
-      var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-      return [...prevValue, itemValue];
-    });
-  }, [setValue]);
-  var handleItemClose = React.useCallback(function (itemValue) {
-    return setValue(function () {
-      var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-      return prevValue.filter(function (value2) {
-        return value2 !== itemValue;
-      });
-    });
-  }, [setValue]);
-  return /* @__PURE__ */_jsx(AccordionValueProvider, {
-    scope: props.__scopeAccordion,
-    value: value || [],
-    onItemOpen: handleItemOpen,
-    onItemClose: handleItemClose,
-    children: /* @__PURE__ */_jsx(AccordionCollapsibleProvider, {
-      scope: props.__scopeAccordion,
-      collapsible: true,
-      children: /* @__PURE__ */_jsx(AccordionImpl, {
-        ...accordionMultipleProps,
-        ref: forwardedRef
-      })
-    })
-  });
+var AccordionImplMultiple = createRefComponent(function(props, forwardedRef) {
+	var { value: valueProp, defaultValue, onValueChange = function() {}, ...accordionMultipleProps } = props;
+	var [value, setValue] = useControllableState({
+		prop: valueProp,
+		defaultProp: defaultValue || [],
+		onChange: onValueChange
+	});
+	var handleItemOpen = React.useCallback(function(itemValue) {
+		return setValue(function() {
+			var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+			return [...prevValue, itemValue];
+		});
+	}, [setValue]);
+	var handleItemClose = React.useCallback(function(itemValue) {
+		return setValue(function() {
+			var prevValue = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+			return prevValue.filter(function(value2) {
+				return value2 !== itemValue;
+			});
+		});
+	}, [setValue]);
+	return /* @__PURE__ */ jsx(AccordionValueProvider, {
+		scope: props.__scopeAccordion,
+		value: value || [],
+		onItemOpen: handleItemOpen,
+		onItemClose: handleItemClose,
+		children: /* @__PURE__ */ jsx(AccordionCollapsibleProvider, {
+			scope: props.__scopeAccordion,
+			collapsible: true,
+			children: /* @__PURE__ */ jsx(AccordionImpl, {
+				...accordionMultipleProps,
+				ref: forwardedRef
+			})
+		})
+	});
 });
-var {
-  Provider: AccordionImplProvider,
-  useStyledContext: useAccordionContext
-} = createStyledContext();
-var AccordionImpl = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    __scopeAccordion,
-    disabled,
-    dir,
-    orientation = "vertical",
-    ...accordionProps
-  } = props;
-  var accordionRef = React.useRef(null);
-  var composedRef = useComposedRefs(accordionRef, forwardedRef);
-  var getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT);
-  var direction = useDirection(dir);
-  var isDirectionLTR = direction === "ltr";
-  var handleKeyDown = composeEventHandlers(props.onKeyDown, function (event) {
-    var _triggerCollection_clampedIndex_ref_current;
-    if (!ACCORDION_KEYS.includes(event.key)) return;
-    var target = event.target;
-    var triggerCollection = getItems().filter(function (item) {
-      var el = item.ref.current;
-      return !(el === null || el === void 0 ? void 0 : el.disabled);
-    });
-    var triggerIndex = triggerCollection.findIndex(function (item) {
-      return item.ref.current === target;
-    });
-    var triggerCount = triggerCollection.length;
-    if (triggerIndex === -1) return;
-    event.preventDefault();
-    var nextIndex = triggerIndex;
-    var homeIndex = 0;
-    var endIndex = triggerCount - 1;
-    var moveNext = function () {
-      nextIndex = triggerIndex + 1;
-      if (nextIndex > endIndex) {
-        nextIndex = homeIndex;
-      }
-    };
-    var movePrev = function () {
-      nextIndex = triggerIndex - 1;
-      if (nextIndex < homeIndex) {
-        nextIndex = endIndex;
-      }
-    };
-    switch (event.key) {
-      case "Home":
-        nextIndex = homeIndex;
-        break;
-      case "End":
-        nextIndex = endIndex;
-        break;
-      case "ArrowRight":
-        if (orientation === "horizontal") {
-          if (isDirectionLTR) {
-            moveNext();
-          } else {
-            movePrev();
-          }
-        }
-        break;
-      case "ArrowDown":
-        if (orientation === "vertical") {
-          moveNext();
-        }
-        break;
-      case "ArrowLeft":
-        if (orientation === "horizontal") {
-          if (isDirectionLTR) {
-            movePrev();
-          } else {
-            moveNext();
-          }
-        }
-        break;
-      case "ArrowUp":
-        if (orientation === "vertical") {
-          movePrev();
-        }
-        break;
-    }
-    var clampedIndex = nextIndex % triggerCount;
-    (_triggerCollection_clampedIndex_ref_current = triggerCollection[clampedIndex].ref.current) === null || _triggerCollection_clampedIndex_ref_current === void 0 ? void 0 : _triggerCollection_clampedIndex_ref_current.focus();
-  });
-  return /* @__PURE__ */_jsx(AccordionImplProvider, {
-    scope: __scopeAccordion,
-    disabled,
-    direction: dir,
-    orientation,
-    children: /* @__PURE__ */_jsx(Collection.Slot, {
-      scope: __scopeAccordion || ACCORDION_CONTEXT,
-      children: /* @__PURE__ */_jsx(YStack, {
-        "data-orientation": orientation,
-        ref: composedRef,
-        ...accordionProps,
-        ...(isWeb && {
-          onKeyDown: handleKeyDown
-        })
-      })
-    })
-  });
+var { Provider: AccordionImplProvider, useStyledContext: useAccordionContext } = createStyledContext();
+var AccordionImpl = createRefComponent(function(props, forwardedRef) {
+	var { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
+	var accordionRef = React.useRef(null);
+	var composedRef = useComposedRefs(accordionRef, forwardedRef);
+	var getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT);
+	var direction = useDirection(dir);
+	var isDirectionLTR = direction === "ltr";
+	var handleKeyDown = composeEventHandlers(props.onKeyDown, function(event) {
+		var _triggerCollection_clampedIndex_ref_current;
+		if (!ACCORDION_KEYS.includes(event.key)) return;
+		var target = event.target;
+		var triggerCollection = getItems().filter(function(item) {
+			var el = item.ref.current;
+			return !(el === null || el === void 0 ? void 0 : el.disabled);
+		});
+		var triggerIndex = triggerCollection.findIndex(function(item) {
+			return item.ref.current === target;
+		});
+		var triggerCount = triggerCollection.length;
+		if (triggerIndex === -1) return;
+		event.preventDefault();
+		var nextIndex = triggerIndex;
+		var homeIndex = 0;
+		var endIndex = triggerCount - 1;
+		var moveNext = function() {
+			nextIndex = triggerIndex + 1;
+			if (nextIndex > endIndex) {
+				nextIndex = homeIndex;
+			}
+		};
+		var movePrev = function() {
+			nextIndex = triggerIndex - 1;
+			if (nextIndex < homeIndex) {
+				nextIndex = endIndex;
+			}
+		};
+		switch (event.key) {
+			case "Home":
+				nextIndex = homeIndex;
+				break;
+			case "End":
+				nextIndex = endIndex;
+				break;
+			case "ArrowRight":
+				if (orientation === "horizontal") {
+					if (isDirectionLTR) {
+						moveNext();
+					} else {
+						movePrev();
+					}
+				}
+				break;
+			case "ArrowDown":
+				if (orientation === "vertical") {
+					moveNext();
+				}
+				break;
+			case "ArrowLeft":
+				if (orientation === "horizontal") {
+					if (isDirectionLTR) {
+						movePrev();
+					} else {
+						moveNext();
+					}
+				}
+				break;
+			case "ArrowUp":
+				if (orientation === "vertical") {
+					movePrev();
+				}
+				break;
+		}
+		var clampedIndex = nextIndex % triggerCount;
+		(_triggerCollection_clampedIndex_ref_current = triggerCollection[clampedIndex].ref.current) === null || _triggerCollection_clampedIndex_ref_current === void 0 ? void 0 : _triggerCollection_clampedIndex_ref_current.focus();
+	});
+	return /* @__PURE__ */ jsx(AccordionImplProvider, {
+		scope: __scopeAccordion,
+		disabled,
+		direction: dir,
+		orientation,
+		children: /* @__PURE__ */ jsx(Collection.Slot, {
+			scope: __scopeAccordion || ACCORDION_CONTEXT,
+			children: /* @__PURE__ */ jsx(YStack, {
+				"data-orientation": orientation,
+				ref: composedRef,
+				...accordionProps,
+				...isWeb && { onKeyDown: handleKeyDown }
+			})
+		})
+	});
 });
 var ITEM_NAME = "AccordionItem";
-var {
-  Provider: AccordionItemProvider,
-  useStyledContext: useAccordionItemContext
-} = createStyledContext();
-var AccordionItem = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    __scopeAccordion,
-    value,
-    ...accordionItemProps
-  } = props;
-  var accordionContext = useAccordionContext(__scopeAccordion);
-  var valueContext = useAccordionValueContext(__scopeAccordion);
-  var triggerId = React.useId();
-  var open = value && valueContext.value.includes(value) || false;
-  var disabled = accordionContext.disabled || props.disabled;
-  return /* @__PURE__ */_jsx(AccordionItemProvider, {
-    scope: __scopeAccordion,
-    open,
-    disabled,
-    triggerId,
-    children: /* @__PURE__ */_jsx(Collapsible, {
-      "data-orientation": accordionContext.orientation,
-      "data-state": open ? "open" : "closed",
-      __scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
-      ...accordionItemProps,
-      ref: forwardedRef,
-      disabled,
-      open,
-      onOpenChange: function (open2) {
-        if (open2) {
-          valueContext.onItemOpen(value);
-        } else {
-          valueContext.onItemClose(value);
-        }
-      }
-    })
-  });
+var { Provider: AccordionItemProvider, useStyledContext: useAccordionItemContext } = createStyledContext();
+var AccordionItem = createRefComponent(function(props, forwardedRef) {
+	var { __scopeAccordion, value, ...accordionItemProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var valueContext = useAccordionValueContext(__scopeAccordion);
+	var triggerId = React.useId();
+	var open = value && valueContext.value.includes(value) || false;
+	var disabled = accordionContext.disabled || props.disabled;
+	return /* @__PURE__ */ jsx(AccordionItemProvider, {
+		scope: __scopeAccordion,
+		open,
+		disabled,
+		triggerId,
+		children: /* @__PURE__ */ jsx(Collapsible, {
+			"data-orientation": accordionContext.orientation,
+			"data-state": open ? "open" : "closed",
+			__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+			...accordionItemProps,
+			ref: forwardedRef,
+			disabled,
+			open,
+			onOpenChange: function(open2) {
+				if (open2) {
+					valueContext.onItemOpen(value);
+				} else {
+					valueContext.onItemClose(value);
+				}
+			}
+		})
+	});
 });
 AccordionItem.displayName = ITEM_NAME;
 var HEADER_NAME = "AccordionHeader";
-var AccordionHeader = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    __scopeAccordion,
-    ...headerProps
-  } = props;
-  var accordionContext = useAccordionContext(__scopeAccordion);
-  var itemContext = useAccordionItemContext(__scopeAccordion);
-  return /* @__PURE__ */_jsx(H1, {
-    "data-orientation": accordionContext.orientation,
-    "data-state": getState(itemContext.open),
-    "data-disabled": itemContext.disabled ? "" : void 0,
-    ...headerProps,
-    ref: forwardedRef
-  });
+var AccordionHeader = createRefComponent(function(props, forwardedRef) {
+	var { __scopeAccordion, ...headerProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var itemContext = useAccordionItemContext(__scopeAccordion);
+	return /* @__PURE__ */ jsx(H1, {
+		"data-orientation": accordionContext.orientation,
+		"data-state": getState(itemContext.open),
+		"data-disabled": itemContext.disabled ? "" : void 0,
+		...headerProps,
+		ref: forwardedRef
+	});
 });
 AccordionHeader.displayName = HEADER_NAME;
-var AccordionTriggerFrame = styled(Collapsible.Trigger, {
-  variants: {
-    unstyled: {
-      false: {
-        cursor: "pointer",
-        backgroundColor: "$background",
-        padding: "$true",
-        hoverStyle: {
-          backgroundColor: "$backgroundHover"
-        },
-        focusStyle: {
-          backgroundColor: "$backgroundFocus"
-        },
-        pressStyle: {
-          backgroundColor: "$backgroundPress"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+var AccordionTriggerFrame = styled(Collapsible.Trigger, { displayName: "AccordionTrigger" });
+var AccordionTrigger = createStyledHOC(AccordionTriggerFrame, function AccordionTrigger2(props, forwardedRef) {
+	var { __scopeAccordion, ...triggerProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var itemContext = useAccordionItemContext(__scopeAccordion);
+	var collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion);
+	return /* @__PURE__ */ jsx(Collection.ItemSlot, {
+		scope: __scopeAccordion || ACCORDION_CONTEXT,
+		children: /* @__PURE__ */ jsx(AccordionTriggerFrame, {
+			__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+			"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
+			"data-orientation": accordionContext.orientation,
+			id: itemContext.triggerId,
+			...triggerProps,
+			ref: forwardedRef
+		})
+	});
 });
-var AccordionTrigger = AccordionTriggerFrame.styleable(function AccordionTrigger2(props, forwardedRef) {
-  var {
-    __scopeAccordion,
-    ...triggerProps
-  } = props;
-  var accordionContext = useAccordionContext(__scopeAccordion);
-  var itemContext = useAccordionItemContext(__scopeAccordion);
-  var collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion);
-  return /* @__PURE__ */_jsx(Collection.ItemSlot, {
-    scope: __scopeAccordion || ACCORDION_CONTEXT,
-    children: /* @__PURE__ */_jsx(AccordionTriggerFrame, {
-      //   @ts-ignore
-      __scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
-      "aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
-      "data-orientation": accordionContext.orientation,
-      id: itemContext.triggerId,
-      ...triggerProps,
-      ref: forwardedRef
-    })
-  });
+var AccordionContentFrame = styled(Collapsible.Content, { displayName: "AccordionContent" });
+var AccordionHeightAnimatorContext = /* @__PURE__ */ React.createContext(false);
+var AccordionContent = createStyledHOC(AccordionContentFrame, function AccordionContent2(props, forwardedRef) {
+	var { __scopeAccordion, forceMount, ...contentProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var itemContext = useAccordionItemContext(__scopeAccordion);
+	var heightAnimatorPresent = React.useContext(AccordionHeightAnimatorContext);
+	return /* @__PURE__ */ jsx(AccordionContentFrame, {
+		role: "region",
+		"aria-labelledby": itemContext.triggerId,
+		"data-orientation": accordionContext.orientation,
+		__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+		...contentProps,
+		forceMount: forceMount || heightAnimatorPresent,
+		ref: forwardedRef
+	});
 });
-var AccordionContentFrame = styled(Collapsible.Content, {
-  variants: {
-    unstyled: {
-      false: {
-        padding: "$true",
-        backgroundColor: "$background"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
-});
-var AccordionHeightAnimatorContext = /* @__PURE__ */React.createContext(false);
-var AccordionContent = AccordionContentFrame.styleable(function AccordionContent2(props, forwardedRef) {
-  var {
-    __scopeAccordion,
-    forceMount,
-    ...contentProps
-  } = props;
-  var accordionContext = useAccordionContext(__scopeAccordion);
-  var itemContext = useAccordionItemContext(__scopeAccordion);
-  var heightAnimatorPresent = React.useContext(AccordionHeightAnimatorContext);
-  return /* @__PURE__ */_jsx(AccordionContentFrame, {
-    role: "region",
-    "aria-labelledby": itemContext.triggerId,
-    "data-orientation": accordionContext.orientation,
-    // @ts-ignore
-    __scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
-    ...contentProps,
-    forceMount: forceMount || heightAnimatorPresent,
-    ref: forwardedRef
-  });
-});
-var HeightAnimator = View.styleable(function (props, ref) {
-  var itemContext = useAccordionItemContext();
-  var {
-    children,
-    transition,
-    ...rest
-  } = props;
-  var open = !!itemContext.open;
-  var [fixed, setFixed] = React.useState(!open);
-  var [pinned, setPinned] = React.useState(false);
-  var [contentPresent, setContentPresent] = React.useState(open);
-  var [contentHeight, setContentHeight] = React.useState(0);
-  var outerRef = React.useRef(null);
-  var innerRef = React.useRef(null);
-  var composedRef = useComposedRefs(outerRef, ref);
-  var lastOuterHeightRef = React.useRef(0);
-  var pinnedHeightRef = React.useRef(0);
-  var settleTimerRef = React.useRef(void 0);
-  var prevOpenRef = React.useRef(open);
-  if (prevOpenRef.current !== open) {
-    prevOpenRef.current = open;
-    clearTimeout(settleTimerRef.current);
-    if (open) {
-      setContentPresent(true);
-    } else if (lastOuterHeightRef.current < 1) {
-      setContentPresent(false);
-    }
-    if (!fixed) {
-      pinnedHeightRef.current = lastOuterHeightRef.current;
-      setFixed(true);
-      setPinned(true);
-    }
-  }
-  useIsomorphicLayoutEffect(function () {
-    if (!pinned) return;
-    if (isWeb) {
-      var _outerRef_current;
-      void ((_outerRef_current = outerRef.current) === null || _outerRef_current === void 0 ? void 0 : _outerRef_current.offsetHeight);
-      setPinned(false);
-      return;
-    }
-    var frame = requestAnimationFrame(function () {
-      return setPinned(false);
-    });
-    return function () {
-      return cancelAnimationFrame(frame);
-    };
-  }, [pinned]);
-  React.useEffect(function () {
-    return function () {
-      return clearTimeout(settleTimerRef.current);
-    };
-  }, []);
-  useIsomorphicLayoutEffect(function () {
-    var _el_getBoundingClientRect;
-    if (!fixed || !open) return;
-    var el = innerRef.current;
-    var naturalHeight = el === null || el === void 0 ? void 0 : (_el_getBoundingClientRect = el.getBoundingClientRect) === null || _el_getBoundingClientRect === void 0 ? void 0 : _el_getBoundingClientRect.call(el).height;
-    if (naturalHeight && naturalHeight > 0 && naturalHeight !== contentHeight) {
-      setContentHeight(naturalHeight);
-    }
-  });
-  var minHeight = pinned ? pinnedHeightRef.current : open ? contentHeight : 0;
-  return /* @__PURE__ */_jsx(View, {
-    ref: composedRef,
-    position: "relative",
-    ...rest,
-    transition: fixed ? transition : void 0,
-    height: "auto",
-    minHeight,
-    overflow: "hidden",
-    onLayout: function (param) {
-      var {
-        nativeEvent
-      } = param;
-      var outerHeight = nativeEvent.layout.height;
-      lastOuterHeightRef.current = outerHeight;
-      if (isWeb && !open && contentPresent && outerHeight < 1) {
-        setContentPresent(false);
-      }
-      clearTimeout(settleTimerRef.current);
-      if (fixed && !pinned && open && contentHeight > 0) {
-        if (Math.abs(outerHeight - contentHeight) < 1) {
-          settleTimerRef.current = setTimeout(function () {
-            return setFixed(false);
-          }, 100);
-        }
-      }
-    },
-    // @ts-expect-error internal animation-driver completion hook
-    onDidAnimate: function () {
-      if (!prevOpenRef.current && !pinned) {
-        setContentPresent(false);
-      }
-    },
-    children: /* @__PURE__ */_jsx(View, {
-      ref: innerRef,
-      position: fixed ? "absolute" : "relative",
-      top: fixed ? 0 : void 0,
-      left: fixed ? 0 : void 0,
-      right: fixed ? 0 : void 0,
-      onLayout: function (param) {
-        var {
-          nativeEvent
-        } = param;
-        var naturalHeight = nativeEvent.layout.height;
-        if (open && naturalHeight !== contentHeight) {
-          setContentHeight(naturalHeight);
-        }
-      },
-      children: /* @__PURE__ */_jsx(AccordionHeightAnimatorContext.Provider, {
-        value: contentPresent,
-        children
-      })
-    })
-  });
+var HeightAnimator = createStyledHOC(View, function(props, ref) {
+	var itemContext = useAccordionItemContext();
+	var { children, transition, ...rest } = props;
+	var open = !!itemContext.open;
+	var [fixed, setFixed] = React.useState(!open);
+	var [pinned, setPinned] = React.useState(false);
+	var [contentPresent, setContentPresent] = React.useState(open);
+	var [contentHeight, setContentHeight] = React.useState(0);
+	var outerRef = React.useRef(null);
+	var innerRef = React.useRef(null);
+	var composedRef = useComposedRefs(outerRef, ref);
+	var lastOuterHeightRef = React.useRef(0);
+	var pinnedHeightRef = React.useRef(0);
+	var settleTimerRef = React.useRef(void 0);
+	var prevOpenRef = React.useRef(open);
+	if (prevOpenRef.current !== open) {
+		prevOpenRef.current = open;
+		clearTimeout(settleTimerRef.current);
+		if (open) {
+			setContentPresent(true);
+		} else if (lastOuterHeightRef.current < 1) {
+			setContentPresent(false);
+		}
+		if (!fixed) {
+			pinnedHeightRef.current = lastOuterHeightRef.current;
+			setFixed(true);
+			setPinned(true);
+		}
+	}
+	useIsomorphicLayoutEffect(function() {
+		if (!pinned) return;
+		if (isWeb) {
+			var _outerRef_current;
+			void ((_outerRef_current = outerRef.current) === null || _outerRef_current === void 0 ? void 0 : _outerRef_current.offsetHeight);
+			setPinned(false);
+			return;
+		}
+		var frame = requestAnimationFrame(function() {
+			return setPinned(false);
+		});
+		return function() {
+			return cancelAnimationFrame(frame);
+		};
+	}, [pinned]);
+	React.useEffect(function() {
+		return function() {
+			return clearTimeout(settleTimerRef.current);
+		};
+	}, []);
+	useIsomorphicLayoutEffect(function() {
+		var _el_getBoundingClientRect;
+		if (!fixed || !open) return;
+		var el = innerRef.current;
+		var naturalHeight = el === null || el === void 0 ? void 0 : (_el_getBoundingClientRect = el.getBoundingClientRect) === null || _el_getBoundingClientRect === void 0 ? void 0 : _el_getBoundingClientRect.call(el).height;
+		if (naturalHeight && naturalHeight > 0 && naturalHeight !== contentHeight) {
+			setContentHeight(naturalHeight);
+		}
+	});
+	var minHeight = pinned ? pinnedHeightRef.current : open ? contentHeight : 0;
+	return /* @__PURE__ */ jsx(View, {
+		ref: composedRef,
+		position: "relative",
+		...rest,
+		transition: fixed ? transition : void 0,
+		height: "auto",
+		minHeight,
+		overflow: "hidden",
+		onLayout: function(param) {
+			var { nativeEvent } = param;
+			var outerHeight = nativeEvent.layout.height;
+			lastOuterHeightRef.current = outerHeight;
+			if (isWeb && !open && contentPresent && outerHeight < 1) {
+				setContentPresent(false);
+			}
+			clearTimeout(settleTimerRef.current);
+			if (fixed && !pinned && open && contentHeight > 0) {
+				if (Math.abs(outerHeight - contentHeight) < 1) {
+					settleTimerRef.current = setTimeout(function() {
+						return setFixed(false);
+					}, 100);
+				}
+			}
+		},
+		onTransition: function(event) {
+			if (event.phase !== "end" || event.cause !== "update" || !event.finished) return;
+			if (!prevOpenRef.current && !pinned) {
+				setContentPresent(false);
+			}
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			ref: innerRef,
+			position: fixed ? "absolute" : "relative",
+			top: fixed ? 0 : void 0,
+			left: fixed ? 0 : void 0,
+			right: fixed ? 0 : void 0,
+			onLayout: function(param) {
+				var { nativeEvent } = param;
+				var naturalHeight = nativeEvent.layout.height;
+				if (open && naturalHeight !== contentHeight) {
+					setContentHeight(naturalHeight);
+				}
+			},
+			children: /* @__PURE__ */ jsx(AccordionHeightAnimatorContext.Provider, {
+				value: contentPresent,
+				children
+			})
+		})
+	});
 });
 function getState(open) {
-  return open ? "open" : "closed";
+	return open ? "open" : "closed";
 }
 var Accordion = withStaticProperties(AccordionComponent, {
-  Trigger: AccordionTrigger,
-  Header: AccordionHeader,
-  Content: AccordionContent,
-  Item: AccordionItem,
-  HeightAnimator
+	Trigger: AccordionTrigger,
+	Header: AccordionHeader,
+	Content: AccordionContent,
+	Item: AccordionItem,
+	HeightAnimator
 });
+
 export { Accordion };
 //# sourceMappingURL=Accordion.native.js.map