@tamagui/accordion 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/Accordion.cjs

@@ -2,373 +2,416 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+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: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  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;
-  };
+  }
+  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: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// 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
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var Accordion_exports = {};
 __export(Accordion_exports, {
   Accordion: () => Accordion
 });
 module.exports = __toCommonJS(Accordion_exports);
-var import_collapsible = require("@tamagui/collapsible"),
-  import_collection = require("@tamagui/collection"),
-  import_compose_refs = require("@tamagui/compose-refs"),
-  import_constants = require("@tamagui/constants"),
-  import_core = require("@tamagui/core"),
-  import_helpers = require("@tamagui/helpers"),
-  import_stacks = require("@tamagui/stacks"),
-  import_text = require("@tamagui/text"),
-  import_use_controllable_state = require("@tamagui/use-controllable-state"),
-  import_use_direction = require("@tamagui/use-direction"),
-  React = __toESM(require("react"), 1),
-  import_jsx_runtime = require("react/jsx-runtime");
-const ACCORDION_NAME = "Accordion",
-  ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"],
-  [Collection, useCollection] = (0, import_collection.createCollection)(ACCORDION_NAME),
-  ACCORDION_CONTEXT = "Accordion",
-  AccordionComponent = React.forwardRef((props, forwardedRef) => {
-    const {
-        type,
-        ...accordionProps
-      } = props,
-      singleProps = accordionProps,
-      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 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_helpers = require("@tamagui/helpers");
+var import_stacks = require("@tamagui/stacks");
+var import_text = require("@tamagui/text");
+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 import_jsx_runtime = require("react/jsx-runtime");
+const ACCORDION_NAME = "Accordion";
+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
+    })
   });
+});
 AccordionComponent.displayName = ACCORDION_NAME;
 AccordionComponent.propTypes = {
   type(props) {
     const value = props.value || props.defaultValue;
-    return props.type && !["single", "multiple"].includes(props.type) ? new Error("Invalid prop `type` supplied to `Accordion`. Expected one of `single | multiple`.") : props.type === "multiple" && typeof value == "string" ? new Error("Invalid prop `type` supplied to `Accordion`. Expected `single` when `defaultValue` or `value` is type `string`.") : props.type === "single" && Array.isArray(value) ? new Error("Invalid prop `type` supplied to `Accordion`. Expected `multiple` when `defaultValue` or `value` is type `string[]`.") : null;
+    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)(),
-  {
-    Provider: AccordionCollapsibleProvider,
-    useStyledContext: useAccordionCollapsibleContext
-  } = (0, import_core.createStyledContext)(),
-  AccordionImplSingle = React.forwardRef((props, forwardedRef) => {
-    const {
-        value: valueProp,
-        defaultValue,
-        control,
-        onValueChange = () => {},
-        collapsible = !1,
-        ...accordionSingleProps
-      } = props,
-      [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-        prop: valueProp,
-        defaultProp: defaultValue || "",
-        onChange: onValueChange
-      });
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionValueProvider, {
+  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,
-      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
-        })
+      collapsible,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImpl, {
+        ...accordionSingleProps,
+        ref: forwardedRef
       })
-    });
-  }),
-  AccordionImplMultiple = React.forwardRef((props, forwardedRef) => {
-    const {
-        value: valueProp,
-        defaultValue,
-        onValueChange = () => {},
-        ...accordionMultipleProps
-      } = props,
-      [value, setValue] = (0, import_use_controllable_state.useControllableState)({
-        prop: valueProp,
-        defaultProp: defaultValue || [],
-        onChange: onValueChange
-      }),
-      handleItemOpen = React.useCallback(itemValue => setValue((prevValue = []) => [...prevValue, itemValue]), [setValue]),
-      handleItemClose = React.useCallback(itemValue => setValue((prevValue = []) => prevValue.filter(value2 => value2 !== itemValue)), [setValue]);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionValueProvider, {
+    })
+  });
+});
+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,
-      value: value || [],
-      onItemOpen: handleItemOpen,
-      onItemClose: handleItemClose,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionCollapsibleProvider, {
-        scope: props.__scopeAccordion,
-        collapsible: !0,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionImpl, {
-          ...accordionMultipleProps,
-          ref: forwardedRef
-        })
+      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;
     });
-  }),
-  {
-    Provider: AccordionImplProvider,
-    useStyledContext: useAccordionContext
-  } = (0, import_core.createStyledContext)(),
-  AccordionImpl = React.forwardRef((props, forwardedRef) => {
-    const {
-        __scopeAccordion,
-        disabled,
-        dir,
-        orientation = "vertical",
-        ...accordionProps
-      } = props,
-      accordionRef = React.useRef(null),
-      composedRef = (0, import_compose_refs.useComposedRefs)(accordionRef, forwardedRef),
-      getItems = useCollection(__scopeAccordion || ACCORDION_CONTEXT),
-      isDirectionLTR = (0, import_use_direction.useDirection)(dir) === "ltr",
-      handleKeyDown = (0, import_helpers.composeEventHandlers)(props.onKeyDown, event => {
-        if (!ACCORDION_KEYS.includes(event.key)) return;
-        const target = event.target,
-          triggerCollection = getItems().filter(item => !item.ref.current?.disabled),
-          triggerIndex = triggerCollection.findIndex(item => item.ref.current === target),
-          triggerCount = triggerCollection.length;
-        if (triggerIndex === -1) return;
-        event.preventDefault();
-        let nextIndex = triggerIndex;
-        const homeIndex = 0,
-          endIndex = triggerCount - 1,
-          moveNext = () => {
-            nextIndex = triggerIndex + 1, nextIndex > endIndex && (nextIndex = homeIndex);
-          },
-          movePrev = () => {
-            nextIndex = triggerIndex - 1, nextIndex < homeIndex && (nextIndex = endIndex);
-          };
-        switch (event.key) {
-          case "Home":
-            nextIndex = homeIndex;
-            break;
-          case "End":
-            nextIndex = endIndex;
-            break;
-          case "ArrowRight":
-            orientation === "horizontal" && (isDirectionLTR ? moveNext() : movePrev());
-            break;
-          case "ArrowDown":
-            orientation === "vertical" && moveNext();
-            break;
-          case "ArrowLeft":
-            orientation === "horizontal" && (isDirectionLTR ? movePrev() : moveNext());
-            break;
-          case "ArrowUp":
-            orientation === "vertical" && movePrev();
-            break;
+    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();
+          }
         }
-        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
-          })
+        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
         })
       })
-    });
-  }),
-  ITEM_NAME = "AccordionItem",
-  {
-    Provider: AccordionItemProvider,
-    useStyledContext: useAccordionItemContext
-  } = (0, import_core.createStyledContext)(),
-  AccordionItem = React.forwardRef((props, forwardedRef) => {
-    const {
-        __scopeAccordion,
-        value,
-        ...accordionItemProps
-      } = props,
-      accordionContext = useAccordionContext(__scopeAccordion),
-      valueContext = useAccordionValueContext(__scopeAccordion),
-      triggerId = React.useId(),
-      open = value && valueContext.value.includes(value) || !1,
-      disabled = accordionContext.disabled || props.disabled;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionItemProvider, {
-      scope: __scopeAccordion,
-      open,
+    })
+  });
+});
+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,
-      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 => {
-          open2 ? valueContext.onItemOpen(value) : valueContext.onItemClose(value);
+      open,
+      onOpenChange: open2 => {
+        if (open2) {
+          valueContext.onItemOpen(value);
+        } else {
+          valueContext.onItemClose(value);
         }
-      })
-    });
+      }
+    })
   });
+});
 AccordionItem.displayName = ITEM_NAME;
-const HEADER_NAME = "AccordionHeader",
-  AccordionHeader = React.forwardRef((props, forwardedRef) => {
-    const {
-        __scopeAccordion,
-        ...headerProps
-      } = props,
-      accordionContext = useAccordionContext(__scopeAccordion),
-      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 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
   });
+});
 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"
-    }
-  }),
-  AccordionTrigger = AccordionTriggerFrame.styleable(function (props, forwardedRef) {
-    const {
-        __scopeAccordion,
-        ...triggerProps
-      } = props,
-      accordionContext = useAccordionContext(__scopeAccordion),
-      itemContext = useAccordionItemContext(__scopeAccordion),
-      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
-      })
-    });
-  }),
-  AccordionContentFrame = (0, import_core.styled)(import_collapsible.Collapsible.Content, {
-    variants: {
-      unstyled: {
-        false: {
-          padding: "$true",
-          backgroundColor: "$background"
+  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"
     }
-  }),
-  AccordionContent = AccordionContentFrame.styleable(function (props, forwardedRef) {
-    const {
-        __scopeAccordion,
-        ...contentProps
-      } = props,
-      accordionContext = useAccordionContext(__scopeAccordion),
-      itemContext = useAccordionItemContext(__scopeAccordion);
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionContentFrame, {
-      role: "region",
-      "aria-labelledby": itemContext.triggerId,
-      "data-orientation": accordionContext.orientation,
+  },
+  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,
-      ...contentProps,
+      "aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
+      "data-orientation": accordionContext.orientation,
+      id: itemContext.triggerId,
+      ...triggerProps,
       ref: forwardedRef
-    });
-  }),
-  HeightAnimator = import_core.View.styleable((props, ref) => {
-    const itemContext = useAccordionItemContext(),
-      {
-        children,
-        ...rest
-      } = props,
-      [measuredHeight, setMeasuredHeight] = React.useState(0),
-      hasMeasured = measuredHeight > 0,
-      height = itemContext.open ? hasMeasured ? measuredHeight : "auto" : 0,
-      shouldAbsolutePosition = hasMeasured || !itemContext.open;
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-      ref,
-      height,
-      position: "relative",
-      ...rest,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
-        position: shouldAbsolutePosition ? "absolute" : "relative",
-        top: shouldAbsolutePosition ? 0 : void 0,
-        left: shouldAbsolutePosition ? 0 : void 0,
-        right: shouldAbsolutePosition ? 0 : void 0,
-        onLayout: ({
-          nativeEvent
-        }) => {
-          nativeEvent.layout.height && nativeEvent.layout.height !== measuredHeight && setMeasuredHeight(nativeEvent.layout.height);
-        },
-        children
-      })
-    });
+    })
   });
+});
+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 AccordionContent = AccordionContentFrame.styleable(function AccordionContent2(props, forwardedRef) {
+  const {
+    __scopeAccordion,
+    ...contentProps
+  } = props;
+  const accordionContext = useAccordionContext(__scopeAccordion);
+  const itemContext = useAccordionItemContext(__scopeAccordion);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AccordionContentFrame, {
+    role: "region",
+    "aria-labelledby": itemContext.triggerId,
+    "data-orientation": accordionContext.orientation,
+    __scopeCollapsible: __scopeAccordion || ACCORDION_CONTEXT,
+    ...contentProps,
+    ref: forwardedRef
+  });
+});
+const HeightAnimator = import_core.View.styleable((props, ref) => {
+  const itemContext = useAccordionItemContext();
+  const {
+    children,
+    ...rest
+  } = props;
+  const [measuredHeight, setMeasuredHeight] = React.useState(0);
+  const hasMeasured = measuredHeight > 0;
+  const height = itemContext.open ? hasMeasured ? measuredHeight : "auto" : 0;
+  const shouldAbsolutePosition = hasMeasured || !itemContext.open;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+    ref,
+    height,
+    position: "relative",
+    ...rest,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.View, {
+      position: shouldAbsolutePosition ? "absolute" : "relative",
+      top: shouldAbsolutePosition ? 0 : void 0,
+      left: shouldAbsolutePosition ? 0 : void 0,
+      right: shouldAbsolutePosition ? 0 : void 0,
+      onLayout: ({
+        nativeEvent
+      }) => {
+        if (nativeEvent.layout.height && nativeEvent.layout.height !== measuredHeight) {
+          setMeasuredHeight(nativeEvent.layout.height);
+        }
+      },
+      children
+    })
+  });
+});
 function getState(open) {
   return open ? "open" : "closed";
 }