@tamagui/accordion 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/Accordion.cjs

@@ -1,3 +1,4 @@
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,42 +6,34 @@ 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_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");
@@ -49,451 +42,366 @@ var import_use_direction = require("@tamagui/use-direction");
 var React = __toESM(require("react"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 const ACCORDION_NAME = "Accordion";
-const ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+const ACCORDION_KEYS = [
+	"Home",
+	"End",
+	"ArrowDown",
+	"ArrowUp",
+	"ArrowLeft",
+	"ArrowRight"
+];
 const [Collection, useCollection] = (0, import_collection.createCollection)(ACCORDION_NAME);
 const ACCORDION_CONTEXT = "Accordion";
-const AccordionComponent = React.forwardRef((props, forwardedRef) => {
-  const {
-    type,
-    ...accordionProps
-  } = props;
-  const singleProps = accordionProps;
-  const 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
-    })
-  });
+const AccordionComponent = (0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { type, ...accordionProps } = props;
+	const singleProps = accordionProps;
+	const 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) {
-    const 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;
-  }
-};
-const {
-  Provider: AccordionValueProvider,
-  useStyledContext: useAccordionValueContext
-} = (0, import_core.createStyledContext)();
-const {
-  Provider: AccordionCollapsibleProvider,
-  useStyledContext: useAccordionCollapsibleContext
-} = (0, import_core.createStyledContext)();
-const AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
-  const {
-    value: valueProp,
-    defaultValue,
-    control,
-    onValueChange = () => {},
-    collapsible = false,
-    ...accordionSingleProps
-  } = props;
-  const [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(() => 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) {
+	const 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;
+} };
+const { Provider: AccordionValueProvider, useStyledContext: useAccordionValueContext } = (0, import_core2.createStyledContext)();
+const { Provider: AccordionCollapsibleProvider, useStyledContext: useAccordionCollapsibleContext } = (0, import_core2.createStyledContext)();
+const AccordionImplSingle = (0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { value: valueProp, defaultValue, control, onValueChange = () => {}, collapsible = false, ...accordionSingleProps } = props;
+	const [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(() => 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
+			})
+		})
+	});
 });
-const AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
-  const {
-    value: valueProp,
-    defaultValue,
-    onValueChange = () => {},
-    ...accordionMultipleProps
-  } = props;
-  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-    prop: valueProp,
-    defaultProp: defaultValue || [],
-    onChange: onValueChange
-  });
-  const handleItemOpen = React.useCallback(itemValue => setValue((prevValue = []) => [...prevValue, itemValue]), [setValue]);
-  const handleItemClose = React.useCallback(itemValue => setValue((prevValue = []) => prevValue.filter(value2 => 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
-      })
-    })
-  });
+const AccordionImplMultiple = (0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { value: valueProp, defaultValue, onValueChange = () => {}, ...accordionMultipleProps } = props;
+	const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+		prop: valueProp,
+		defaultProp: defaultValue || [],
+		onChange: onValueChange
+	});
+	const handleItemOpen = React.useCallback((itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]), [setValue]);
+	const handleItemClose = React.useCallback((itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => 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
+			})
+		})
+	});
 });
-const {
-  Provider: AccordionImplProvider,
-  useStyledContext: useAccordionContext
-} = (0, import_core.createStyledContext)();
-const AccordionImpl = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAccordion,
-    disabled,
-    dir,
-    orientation = "vertical",
-    ...accordionProps
-  } = props;
-  const accordionRef = React.useRef(null);
-  const composedRef = (0, import_compose_refs.useComposedRefs)(accordionRef, forwardedRef);
-  const getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT);
-  const direction = (0, import_use_direction.useDirection)(dir);
-  const isDirectionLTR = direction === "ltr";
-  const handleKeyDown = (0, import_helpers.composeEventHandlers)(props.onKeyDown, event => {
-    if (!ACCORDION_KEYS.includes(event.key)) return;
-    const target = event.target;
-    const triggerCollection = getItems().filter(item => {
-      const el = item.ref.current;
-      return !el?.disabled;
-    });
-    const triggerIndex = triggerCollection.findIndex(item => item.ref.current === target);
-    const triggerCount = triggerCollection.length;
-    if (triggerIndex === -1) return;
-    event.preventDefault();
-    let nextIndex = triggerIndex;
-    const homeIndex = 0;
-    const endIndex = triggerCount - 1;
-    const moveNext = () => {
-      nextIndex = triggerIndex + 1;
-      if (nextIndex > endIndex) {
-        nextIndex = homeIndex;
-      }
-    };
-    const movePrev = () => {
-      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;
-    }
-    const clampedIndex = nextIndex % triggerCount;
-    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
-        })
-      })
-    })
-  });
+const { Provider: AccordionImplProvider, useStyledContext: useAccordionContext } = (0, import_core2.createStyledContext)();
+const AccordionImpl = (0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
+	const accordionRef = React.useRef(null);
+	const composedRef = (0, import_compose_refs.useComposedRefs)(accordionRef, forwardedRef);
+	const getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT);
+	const direction = (0, import_use_direction.useDirection)(dir);
+	const isDirectionLTR = direction === "ltr";
+	const handleKeyDown = (0, import_helpers.composeEventHandlers)(props.onKeyDown, (event) => {
+		if (!ACCORDION_KEYS.includes(event.key)) return;
+		const target = event.target;
+		const triggerCollection = getItems().filter((item) => {
+			const el = item.ref.current;
+			return !el?.disabled;
+		});
+		const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
+		const triggerCount = triggerCollection.length;
+		if (triggerIndex === -1) return;
+		event.preventDefault();
+		let nextIndex = triggerIndex;
+		const homeIndex = 0;
+		const endIndex = triggerCount - 1;
+		const moveNext = () => {
+			nextIndex = triggerIndex + 1;
+			if (nextIndex > endIndex) {
+				nextIndex = homeIndex;
+			}
+		};
+		const movePrev = () => {
+			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;
+		}
+		const clampedIndex = nextIndex % triggerCount;
+		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 }
+			})
+		})
+	});
 });
 const ITEM_NAME = "AccordionItem";
-const {
-  Provider: AccordionItemProvider,
-  useStyledContext: useAccordionItemContext
-} = (0, import_core.createStyledContext)();
-const AccordionItem = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAccordion,
-    value,
-    ...accordionItemProps
-  } = props;
-  const accordionContext = useAccordionContext(__scopeAccordion);
-  const valueContext = useAccordionValueContext(__scopeAccordion);
-  const triggerId = React.useId();
-  const open = value && valueContext.value.includes(value) || false;
-  const 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: open2 => {
-        if (open2) {
-          valueContext.onItemOpen(value);
-        } else {
-          valueContext.onItemClose(value);
-        }
-      }
-    })
-  });
+const { Provider: AccordionItemProvider, useStyledContext: useAccordionItemContext } = (0, import_core2.createStyledContext)();
+const AccordionItem = (0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { __scopeAccordion, value, ...accordionItemProps } = props;
+	const accordionContext = useAccordionContext(__scopeAccordion);
+	const valueContext = useAccordionValueContext(__scopeAccordion);
+	const triggerId = React.useId();
+	const open = value && valueContext.value.includes(value) || false;
+	const 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: (open2) => {
+				if (open2) {
+					valueContext.onItemOpen(value);
+				} else {
+					valueContext.onItemClose(value);
+				}
+			}
+		})
+	});
 });
 AccordionItem.displayName = ITEM_NAME;
 const HEADER_NAME = "AccordionHeader";
-const AccordionHeader = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeAccordion,
-    ...headerProps
-  } = props;
-  const accordionContext = useAccordionContext(__scopeAccordion);
-  const 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
-  });
+const AccordionHeader = (0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { __scopeAccordion, ...headerProps } = props;
+	const accordionContext = useAccordionContext(__scopeAccordion);
+	const 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;
-const 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"
-  }
-});
-const AccordionTrigger = AccordionTriggerFrame.styleable(function AccordionTrigger2(props, forwardedRef) {
-  const {
-    __scopeAccordion,
-    ...triggerProps
-  } = props;
-  const accordionContext = useAccordionContext(__scopeAccordion);
-  const itemContext = useAccordionItemContext(__scopeAccordion);
-  const 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
-    })
-  });
-});
-const AccordionContentFrame = (0, import_core.styled)(import_collapsible.Collapsible.Content, {
-  variants: {
-    unstyled: {
-      false: {
-        padding: "$true",
-        backgroundColor: "$background"
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+const AccordionTriggerFrame = (0, import_core2.styled)(import_collapsible.Collapsible.Trigger, { displayName: "AccordionTrigger" });
+const AccordionTrigger = (0, import_core.createStyledHOC)(AccordionTriggerFrame, function AccordionTrigger2(props, forwardedRef) {
+	const { __scopeAccordion, ...triggerProps } = props;
+	const accordionContext = useAccordionContext(__scopeAccordion);
+	const itemContext = useAccordionItemContext(__scopeAccordion);
+	const 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
+		})
+	});
 });
+const AccordionContentFrame = (0, import_core2.styled)(import_collapsible.Collapsible.Content, { displayName: "AccordionContent" });
 const AccordionHeightAnimatorContext = React.createContext(false);
-const AccordionContent = AccordionContentFrame.styleable(function AccordionContent2(props, forwardedRef) {
-  const {
-    __scopeAccordion,
-    forceMount,
-    ...contentProps
-  } = props;
-  const accordionContext = useAccordionContext(__scopeAccordion);
-  const itemContext = useAccordionItemContext(__scopeAccordion);
-  const 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
-  });
+const AccordionContent = (0, import_core.createStyledHOC)(AccordionContentFrame, function AccordionContent2(props, forwardedRef) {
+	const { __scopeAccordion, forceMount, ...contentProps } = props;
+	const accordionContext = useAccordionContext(__scopeAccordion);
+	const itemContext = useAccordionItemContext(__scopeAccordion);
+	const 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
+	});
 });
-const HeightAnimator = import_core.View.styleable((props, ref) => {
-  const itemContext = useAccordionItemContext();
-  const {
-    children,
-    transition,
-    ...rest
-  } = props;
-  const open = !!itemContext.open;
-  const [fixed, setFixed] = React.useState(!open);
-  const [pinned, setPinned] = React.useState(false);
-  const [contentPresent, setContentPresent] = React.useState(open);
-  const [contentHeight, setContentHeight] = React.useState(0);
-  const outerRef = React.useRef(null);
-  const innerRef = React.useRef(null);
-  const composedRef = (0, import_compose_refs.useComposedRefs)(outerRef, ref);
-  const lastOuterHeightRef = React.useRef(0);
-  const pinnedHeightRef = React.useRef(0);
-  const settleTimerRef = React.useRef(void 0);
-  const 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)(() => {
-    if (!pinned) return;
-    if (import_constants.isWeb) {
-      void outerRef.current?.offsetHeight;
-      setPinned(false);
-      return;
-    }
-    const frame = requestAnimationFrame(() => setPinned(false));
-    return () => cancelAnimationFrame(frame);
-  }, [pinned]);
-  React.useEffect(() => () => clearTimeout(settleTimerRef.current), []);
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (!fixed || !open) return;
-    const el = innerRef.current;
-    const naturalHeight = el?.getBoundingClientRect?.().height;
-    if (naturalHeight && naturalHeight > 0 && naturalHeight !== contentHeight) {
-      setContentHeight(naturalHeight);
-    }
-  });
-  const 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: ({
-      nativeEvent
-    }) => {
-      const 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(() => setFixed(false), 100);
-        }
-      }
-    },
-    onDidAnimate: () => {
-      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: ({
-        nativeEvent
-      }) => {
-        const naturalHeight = nativeEvent.layout.height;
-        if (open && naturalHeight !== contentHeight) {
-          setContentHeight(naturalHeight);
-        }
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionHeightAnimatorContext.Provider, {
-        value: contentPresent,
-        children
-      })
-    })
-  });
+const HeightAnimator = (0, import_core.createStyledHOC)(import_core2.View, (props, ref) => {
+	const itemContext = useAccordionItemContext();
+	const { children, transition, ...rest } = props;
+	const open = !!itemContext.open;
+	const [fixed, setFixed] = React.useState(!open);
+	const [pinned, setPinned] = React.useState(false);
+	const [contentPresent, setContentPresent] = React.useState(open);
+	const [contentHeight, setContentHeight] = React.useState(0);
+	const outerRef = React.useRef(null);
+	const innerRef = React.useRef(null);
+	const composedRef = (0, import_compose_refs.useComposedRefs)(outerRef, ref);
+	const lastOuterHeightRef = React.useRef(0);
+	const pinnedHeightRef = React.useRef(0);
+	const settleTimerRef = React.useRef(void 0);
+	const 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)(() => {
+		if (!pinned) return;
+		if (import_constants.isWeb) {
+			void outerRef.current?.offsetHeight;
+			setPinned(false);
+			return;
+		}
+		const frame = requestAnimationFrame(() => setPinned(false));
+		return () => cancelAnimationFrame(frame);
+	}, [pinned]);
+	React.useEffect(() => () => clearTimeout(settleTimerRef.current), []);
+	(0, import_constants.useIsomorphicLayoutEffect)(() => {
+		if (!fixed || !open) return;
+		const el = innerRef.current;
+		const naturalHeight = el?.getBoundingClientRect?.().height;
+		if (naturalHeight && naturalHeight > 0 && naturalHeight !== contentHeight) {
+			setContentHeight(naturalHeight);
+		}
+	});
+	const 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: ({ nativeEvent }) => {
+			const 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(() => setFixed(false), 100);
+				}
+			}
+		},
+		onTransition: (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: ({ nativeEvent }) => {
+				const 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";
 }
 const Accordion = (0, import_helpers.withStaticProperties)(AccordionComponent, {
-  Trigger: AccordionTrigger,
-  Header: AccordionHeader,
-  Content: AccordionContent,
-  Item: AccordionItem,
-  HeightAnimator
-});
+	Trigger: AccordionTrigger,
+	Header: AccordionHeader,
+	Content: AccordionContent,
+	Item: AccordionItem,
+	HeightAnimator
+});