@tamagui/accordion 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/Accordion.native.js

@@ -1,5 +1,6 @@
 "use strict";
 
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,43 +8,35 @@ 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
-  });
+	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;
+	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
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Accordion_exports = {};
-__export(Accordion_exports, {
-  Accordion: () => Accordion
-});
+__export(Accordion_exports, { Accordion: () => Accordion });
 module.exports = __toCommonJS(Accordion_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@tamagui/core");
 var import_collapsible = require("@tamagui/collapsible");
 var import_collection = require("@tamagui/collection");
 var import_compose_refs = require("@tamagui/compose-refs");
 var import_constants = require("@tamagui/constants");
-var import_core = require("@tamagui/core");
+var import_core2 = require("@tamagui/core");
 var import_helpers = require("@tamagui/helpers");
 var import_stacks = require("@tamagui/stacks");
 var import_text = require("@tamagui/text");
@@ -51,486 +44,399 @@ var import_use_controllable_state = require("@tamagui/use-controllable-state");
 var import_use_direction = require("@tamagui/use-direction");
 var React = __toESM(require("react"), 1);
 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] = (0, import_collection.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__ */(0, import_jsx_runtime.jsx)(Collection.Provider, {
-    scope: props.__scopeAccordion || ACCORDION_CONTEXT,
-    children: type === "multiple" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImplMultiple, {
-      ...multipleProps,
-      ref: forwardedRef
-    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImplSingle, {
-      ...singleProps,
-      ref: forwardedRef
-    })
-  });
+var AccordionComponent = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { type, ...accordionProps } = props;
+	var singleProps = accordionProps;
+	var multipleProps = accordionProps;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Provider, {
+		scope: props.__scopeAccordion || ACCORDION_CONTEXT,
+		children: type === "multiple" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImplMultiple, {
+			...multipleProps,
+			ref: forwardedRef
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.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
-} = (0, import_core.createStyledContext)();
-var {
-  Provider: AccordionCollapsibleProvider,
-  useStyledContext: useAccordionCollapsibleContext
-} = (0, import_core.createStyledContext)();
-var AccordionImplSingle = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    value: valueProp,
-    defaultValue,
-    control,
-    onValueChange = function () {},
-    collapsible = false,
-    ...accordionSingleProps
-  } = props;
-  var [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    prop: valueProp,
-    defaultProp: defaultValue || "",
-    onChange: onValueChange
-  });
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionValueProvider, {
-    scope: props.__scopeAccordion,
-    value: value ? [value] : [],
-    onItemOpen: setValue,
-    onItemClose: React.useCallback(function () {
-      return collapsible && setValue("");
-    }, [setValue, collapsible]),
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, {
-      scope: props.__scopeAccordion,
-      collapsible,
-      children: /* @__PURE__ */(0, import_jsx_runtime.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 } = (0, import_core2.createStyledContext)();
+var { Provider: AccordionCollapsibleProvider, useStyledContext: useAccordionCollapsibleContext } = (0, import_core2.createStyledContext)();
+var AccordionImplSingle = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { value: valueProp, defaultValue, control, onValueChange = function() {}, collapsible = false, ...accordionSingleProps } = props;
+	var [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue || "",
+		onChange: onValueChange
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionValueProvider, {
+		scope: props.__scopeAccordion,
+		value: value ? [value] : [],
+		onItemOpen: setValue,
+		onItemClose: React.useCallback(function() {
+			return collapsible && setValue("");
+		}, [setValue, collapsible]),
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, {
+			scope: props.__scopeAccordion,
+			collapsible,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImpl, {
+				...accordionSingleProps,
+				ref: forwardedRef
+			})
+		})
+	});
 });
-var AccordionImplMultiple = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    value: valueProp,
-    defaultValue,
-    onValueChange = function () {},
-    ...accordionMultipleProps
-  } = props;
-  var [value, setValue] = (0, import_use_controllable_state.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__ */(0, import_jsx_runtime.jsx)(AccordionValueProvider, {
-    scope: props.__scopeAccordion,
-    value: value || [],
-    onItemOpen: handleItemOpen,
-    onItemClose: handleItemClose,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, {
-      scope: props.__scopeAccordion,
-      collapsible: true,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImpl, {
-        ...accordionMultipleProps,
-        ref: forwardedRef
-      })
-    })
-  });
+var AccordionImplMultiple = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { value: valueProp, defaultValue, onValueChange = function() {}, ...accordionMultipleProps } = props;
+	var [value, setValue] = (0, import_use_controllable_state.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__ */ (0, import_jsx_runtime.jsx)(AccordionValueProvider, {
+		scope: props.__scopeAccordion,
+		value: value || [],
+		onItemOpen: handleItemOpen,
+		onItemClose: handleItemClose,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, {
+			scope: props.__scopeAccordion,
+			collapsible: true,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionImpl, {
+				...accordionMultipleProps,
+				ref: forwardedRef
+			})
+		})
+	});
 });
-var {
-  Provider: AccordionImplProvider,
-  useStyledContext: useAccordionContext
-} = (0, import_core.createStyledContext)();
-var AccordionImpl = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    __scopeAccordion,
-    disabled,
-    dir,
-    orientation = "vertical",
-    ...accordionProps
-  } = props;
-  var accordionRef = React.useRef(null);
-  var composedRef = (0, import_compose_refs.useComposedRefs)(accordionRef, forwardedRef);
-  var getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT);
-  var direction = (0, import_use_direction.useDirection)(dir);
-  var isDirectionLTR = direction === "ltr";
-  var handleKeyDown = (0, import_helpers.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__ */(0, import_jsx_runtime.jsx)(AccordionImplProvider, {
-    scope: __scopeAccordion,
-    disabled,
-    direction: dir,
-    orientation,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Collection.Slot, {
-      scope: __scopeAccordion || ACCORDION_CONTEXT,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_stacks.YStack, {
-        "data-orientation": orientation,
-        ref: composedRef,
-        ...accordionProps,
-        ...(import_constants.isWeb && {
-          onKeyDown: handleKeyDown
-        })
-      })
-    })
-  });
+var { Provider: AccordionImplProvider, useStyledContext: useAccordionContext } = (0, import_core2.createStyledContext)();
+var AccordionImpl = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
+	var accordionRef = React.useRef(null);
+	var composedRef = (0, import_compose_refs.useComposedRefs)(accordionRef, forwardedRef);
+	var getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT);
+	var direction = (0, import_use_direction.useDirection)(dir);
+	var isDirectionLTR = direction === "ltr";
+	var handleKeyDown = (0, import_helpers.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__ */ (0, import_jsx_runtime.jsx)(AccordionImplProvider, {
+		scope: __scopeAccordion,
+		disabled,
+		direction: dir,
+		orientation,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.Slot, {
+			scope: __scopeAccordion || ACCORDION_CONTEXT,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
+				"data-orientation": orientation,
+				ref: composedRef,
+				...accordionProps,
+				...import_constants.isWeb && { onKeyDown: handleKeyDown }
+			})
+		})
+	});
 });
 var ITEM_NAME = "AccordionItem";
-var {
-  Provider: AccordionItemProvider,
-  useStyledContext: useAccordionItemContext
-} = (0, import_core.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__ */(0, import_jsx_runtime.jsx)(AccordionItemProvider, {
-    scope: __scopeAccordion,
-    open,
-    disabled,
-    triggerId,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_collapsible.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 } = (0, import_core2.createStyledContext)();
+var AccordionItem = (0, import_core.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__ */ (0, import_jsx_runtime.jsx)(AccordionItemProvider, {
+		scope: __scopeAccordion,
+		open,
+		disabled,
+		triggerId,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_collapsible.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__ */(0, import_jsx_runtime.jsx)(import_text.H1, {
-    "data-orientation": accordionContext.orientation,
-    "data-state": getState(itemContext.open),
-    "data-disabled": itemContext.disabled ? "" : void 0,
-    ...headerProps,
-    ref: forwardedRef
-  });
+var AccordionHeader = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { __scopeAccordion, ...headerProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var itemContext = useAccordionItemContext(__scopeAccordion);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.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 = (0, import_core.styled)(import_collapsible.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 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__ */(0, import_jsx_runtime.jsx)(Collection.ItemSlot, {
-    scope: __scopeAccordion || ACCORDION_CONTEXT,
-    children: /* @__PURE__ */(0, import_jsx_runtime.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 AccordionTriggerFrame = (0, import_core2.styled)(import_collapsible.Collapsible.Trigger, { displayName: "AccordionTrigger" });
+var AccordionTrigger = (0, import_core.createStyledHOC)(AccordionTriggerFrame, function AccordionTrigger2(props, forwardedRef) {
+	var { __scopeAccordion, ...triggerProps } = props;
+	var accordionContext = useAccordionContext(__scopeAccordion);
+	var itemContext = useAccordionItemContext(__scopeAccordion);
+	var collapsibleContext = useAccordionCollapsibleContext(__scopeAccordion);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, {
+		scope: __scopeAccordion || ACCORDION_CONTEXT,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.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 AccordionContentFrame = (0, import_core.styled)(import_collapsible.Collapsible.Content, {
-  variants: {
-    unstyled: {
-      false: {
-        padding: "$true",
-        backgroundColor: "$background"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+var AccordionContentFrame = (0, import_core2.styled)(import_collapsible.Collapsible.Content, { displayName: "AccordionContent" });
+var AccordionHeightAnimatorContext = /* @__PURE__ */ React.createContext(false);
+var AccordionContent = (0, import_core.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__ */ (0, import_jsx_runtime.jsx)(AccordionContentFrame, {
+		role: "region",
+		"aria-labelledby": itemContext.triggerId,
+		"data-orientation": accordionContext.orientation,
+		__scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+		...contentProps,
+		forceMount: forceMount || heightAnimatorPresent,
+		ref: forwardedRef
+	});
 });
-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__ */(0, import_jsx_runtime.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 = import_core.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 = (0, import_compose_refs.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);
-    }
-  }
-  (0, import_constants.useIsomorphicLayoutEffect)(function () {
-    if (!pinned) return;
-    if (import_constants.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);
-    };
-  }, []);
-  (0, import_constants.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__ */(0, import_jsx_runtime.jsx)(import_core.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 (import_constants.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__ */(0, import_jsx_runtime.jsx)(import_core.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__ */(0, import_jsx_runtime.jsx)(AccordionHeightAnimatorContext.Provider, {
-        value: contentPresent,
-        children
-      })
-    })
-  });
+var HeightAnimator = (0, import_core.createStyledHOC)(import_core2.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 = (0, import_compose_refs.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);
+		}
+	}
+	(0, import_constants.useIsomorphicLayoutEffect)(function() {
+		if (!pinned) return;
+		if (import_constants.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);
+		};
+	}, []);
+	(0, import_constants.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__ */ (0, import_jsx_runtime.jsx)(import_core2.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 (import_constants.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__ */ (0, import_jsx_runtime.jsx)(import_core2.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__ */ (0, import_jsx_runtime.jsx)(AccordionHeightAnimatorContext.Provider, {
+				value: contentPresent,
+				children
+			})
+		})
+	});
 });
 function getState(open) {
-  return open ? "open" : "closed";
+	return open ? "open" : "closed";
 }
 var Accordion = (0, import_helpers.withStaticProperties)(AccordionComponent, {
-  Trigger: AccordionTrigger,
-  Header: AccordionHeader,
-  Content: AccordionContent,
-  Item: AccordionItem,
-  HeightAnimator
+	Trigger: AccordionTrigger,
+	Header: AccordionHeader,
+	Content: AccordionContent,
+	Item: AccordionItem,
+	HeightAnimator
 });
+
 //# sourceMappingURL=Accordion.native.js.map