@ariakit/react-core 0.4.0 → 0.4.2

package/cjs/select/select.cjs

@@ -1,42 +1,42 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _PR3MIXQDcjs = require('../__chunks/PR3MIXQD.cjs');
-require('../__chunks/K5V42RR6.cjs');
-require('../__chunks/JH5Y3M4V.cjs');
-require('../__chunks/O45NLQRZ.cjs');
-require('../__chunks/MMDU7VRJ.cjs');
+var _K6TBX2ZBcjs = require('../__chunks/K6TBX2ZB.cjs');
+require('../__chunks/BSEVPIKO.cjs');
+require('../__chunks/27SIFUY3.cjs');
+require('../__chunks/YH42XRHR.cjs');
+require('../__chunks/IXJIFLOA.cjs');
 
 
-var _BIK2473Zcjs = require('../__chunks/BIK2473Z.cjs');
-require('../__chunks/7UBOHCYJ.cjs');
+var _NZSB7HSZcjs = require('../__chunks/NZSB7HSZ.cjs');
+require('../__chunks/3C4RFBCG.cjs');
 
 
-var _XSRQB4KOcjs = require('../__chunks/XSRQB4KO.cjs');
+var _4LPJTV22cjs = require('../__chunks/4LPJTV22.cjs');
 
 
 
-var _STYNL4LLcjs = require('../__chunks/STYNL4LL.cjs');
-require('../__chunks/ZMTZTMRS.cjs');
+var _HZDOLHROcjs = require('../__chunks/HZDOLHRO.cjs');
+require('../__chunks/U4NXCMZ3.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
-require('../__chunks/4XFLDG56.cjs');
-require('../__chunks/Q6CVYJBO.cjs');
-require('../__chunks/FNVFJ5AF.cjs');
-require('../__chunks/OLPMMKKO.cjs');
-require('../__chunks/XRJBC7H7.cjs');
-require('../__chunks/5QD55NKL.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/77BAEZ2Z.cjs');
+require('../__chunks/GDEDCFNU.cjs');
+require('../__chunks/NTNMOEWE.cjs');
+require('../__chunks/FHRIPOYF.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
-var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
+var _NGD3IQDBcjs = require('../__chunks/NGD3IQDB.cjs');
 
 
 
 
 
-var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
+var _TW3SFX4Ccjs = require('../__chunks/TW3SFX4C.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 
 
@@ -74,7 +74,7 @@ function nextWithValue(store, next) {
     return nextItem == null ? void 0 : nextItem.id;
   };
 }
-var useSelect = _Q67LZMDTcjs.createHook.call(void 0, function useSelect2(_a) {
+var useSelect = _NGD3IQDBcjs.createHook.call(void 0, function useSelect2(_a) {
   var _b = _a, {
     store,
     name,
@@ -94,7 +94,7 @@ var useSelect = _Q67LZMDTcjs.createHook.call(void 0, function useSelect2(_a) {
     "toggleOnClick",
     "toggleOnPress"
   ]);
-  const context = _STYNL4LLcjs.useSelectProviderContext.call(void 0, );
+  const context = _HZDOLHROcjs.useSelectProviderContext.call(void 0, );
   store = store || context;
   _misc.invariant.call(void 0, 
     store,
@@ -102,14 +102,14 @@ var useSelect = _Q67LZMDTcjs.createHook.call(void 0, function useSelect2(_a) {
   );
   toggleOnPress = toggleOnClick ? false : toggleOnPress;
   const onKeyDownProp = props.onKeyDown;
-  const showOnKeyDownProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, showOnKeyDown);
-  const moveOnKeyDownProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, moveOnKeyDown);
-  const toggleOnPressProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, toggleOnPress);
+  const showOnKeyDownProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnKeyDown);
+  const moveOnKeyDownProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, moveOnKeyDown);
+  const toggleOnPressProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, toggleOnPress);
   const placement = store.useState("placement");
   const dir = placement.split("-")[0];
   const value = store.useState("value");
   const multiSelectable = Array.isArray(value);
-  const onKeyDown = _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
+  const onKeyDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
     var _a2;
     onKeyDownProp == null ? void 0 : onKeyDownProp(event);
     if (event.defaultPrevented)
@@ -154,7 +154,7 @@ var useSelect = _Q67LZMDTcjs.createHook.call(void 0, function useSelect2(_a) {
     }
   });
   const onMouseDownProp = props.onMouseDown;
-  const onMouseDown = _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
+  const onMouseDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
     onMouseDownProp == null ? void 0 : onMouseDownProp(event);
     if (event.defaultPrevented)
       return;
@@ -170,9 +170,9 @@ var useSelect = _Q67LZMDTcjs.createHook.call(void 0, function useSelect2(_a) {
       store == null ? void 0 : store.toggle();
     });
   });
-  props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
+  props = _TW3SFX4Ccjs.useWrapElement.call(void 0, 
     props,
-    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _STYNL4LLcjs.SelectScopedContextProvider, { value: store, children: element }),
+    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HZDOLHROcjs.SelectScopedContextProvider, { value: store, children: element }),
     [store]
   );
   const [autofill, setAutofill] = _react.useState.call(void 0, false);
@@ -198,7 +198,7 @@ var useSelect = _Q67LZMDTcjs.createHook.call(void 0, function useSelect2(_a) {
   const values = _react.useMemo.call(void 0, () => {
     return [...new Set(items == null ? void 0 : items.map((i) => i.value).filter((v) => v != null))];
   }, [items]);
-  props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
+  props = _TW3SFX4Ccjs.useWrapElement.call(void 0, 
     props,
     (element) => {
       if (!name)
@@ -267,7 +267,7 @@ var useSelect = _Q67LZMDTcjs.createHook.call(void 0, function useSelect2(_a) {
   );
   const children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     value,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _BIK2473Zcjs.SelectArrow, {})
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _NZSB7HSZcjs.SelectArrow, {})
   ] });
   const contentElement = store.useState("contentElement");
   props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
@@ -279,17 +279,17 @@ var useSelect = _Q67LZMDTcjs.createHook.call(void 0, function useSelect2(_a) {
     "data-name": name,
     children
   }, props), {
-    ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, store.setSelectElement, props.ref),
+    ref: _TW3SFX4Ccjs.useMergeRefs.call(void 0, store.setSelectElement, props.ref),
     onKeyDown,
     onMouseDown
   });
-  props = _PR3MIXQDcjs.usePopoverDisclosure.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, toggleOnClick }, props));
-  props = _XSRQB4KOcjs.useCompositeTypeahead.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+  props = _K6TBX2ZBcjs.usePopoverDisclosure.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, toggleOnClick }, props));
+  props = _4LPJTV22cjs.useCompositeTypeahead.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
   return props;
 });
-var Select = _Q67LZMDTcjs.forwardRef.call(void 0, function Select2(props) {
+var Select = _NGD3IQDBcjs.forwardRef.call(void 0, function Select2(props) {
   const htmlProps = useSelect(props);
-  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);
 });
 
 

package/cjs/separator/separator.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _FG4Y7VYMcjs = require('../__chunks/FG4Y7VYM.cjs');
-require('../__chunks/Q67LZMDT.cjs');
-require('../__chunks/EO6LS72H.cjs');
+var _IDFJXUSFcjs = require('../__chunks/IDFJXUSF.cjs');
+require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/TW3SFX4C.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Separator = _FG4Y7VYMcjs.Separator; exports.useSeparator = _FG4Y7VYMcjs.useSeparator;
+exports.Separator = _IDFJXUSFcjs.Separator; exports.useSeparator = _IDFJXUSFcjs.useSeparator;

package/cjs/tab/tab-context.cjs

@@ -5,11 +5,11 @@
 
 
 
-var _R3OO4M3Ncjs = require('../__chunks/R3OO4M3N.cjs');
-require('../__chunks/4XFLDG56.cjs');
-require('../__chunks/Q6CVYJBO.cjs');
-require('../__chunks/Q67LZMDT.cjs');
-require('../__chunks/EO6LS72H.cjs');
+var _5CAFC273cjs = require('../__chunks/5CAFC273.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/TW3SFX4C.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
@@ -18,4 +18,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.TabContextProvider = _R3OO4M3Ncjs.TabContextProvider; exports.TabScopedContextProvider = _R3OO4M3Ncjs.TabScopedContextProvider; exports.useTabContext = _R3OO4M3Ncjs.useTabContext; exports.useTabProviderContext = _R3OO4M3Ncjs.useTabProviderContext; exports.useTabScopedContext = _R3OO4M3Ncjs.useTabScopedContext;
+exports.TabContextProvider = _5CAFC273cjs.TabContextProvider; exports.TabScopedContextProvider = _5CAFC273cjs.TabScopedContextProvider; exports.useTabContext = _5CAFC273cjs.useTabContext; exports.useTabProviderContext = _5CAFC273cjs.useTabProviderContext; exports.useTabScopedContext = _5CAFC273cjs.useTabScopedContext;

package/cjs/tab/tab-list.cjs

@@ -2,23 +2,23 @@
 
 
 
-var _R3OO4M3Ncjs = require('../__chunks/R3OO4M3N.cjs');
+var _5CAFC273cjs = require('../__chunks/5CAFC273.cjs');
 
 
-var _NCXCQQBNcjs = require('../__chunks/NCXCQQBN.cjs');
+var _EKW5CERCcjs = require('../__chunks/EKW5CERC.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
-require('../__chunks/4XFLDG56.cjs');
-require('../__chunks/Q6CVYJBO.cjs');
-require('../__chunks/5QD55NKL.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/FHRIPOYF.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
-var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
+var _NGD3IQDBcjs = require('../__chunks/NGD3IQDB.cjs');
 
 
-var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
+var _TW3SFX4Ccjs = require('../__chunks/TW3SFX4C.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 
 
@@ -29,10 +29,10 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
 var TagName = "div";
-var useTabList = _Q67LZMDTcjs.createHook.call(void 0, 
+var useTabList = _NGD3IQDBcjs.createHook.call(void 0, 
   function useTabList2(_a) {
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
-    const context = _R3OO4M3Ncjs.useTabProviderContext.call(void 0, );
+    const context = _5CAFC273cjs.useTabProviderContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -41,22 +41,27 @@ var useTabList = _Q67LZMDTcjs.createHook.call(void 0,
     const orientation = store.useState(
       (state) => state.orientation === "both" ? void 0 : state.orientation
     );
-    props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
+    props = _TW3SFX4Ccjs.useWrapElement.call(void 0, 
       props,
-      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _R3OO4M3Ncjs.TabScopedContextProvider, { value: store, children: element }),
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5CAFC273cjs.TabScopedContextProvider, { value: store, children: element }),
       [store]
     );
+    if (store.composite) {
+      props = _AV6KTKLEcjs.__spreadValues.call(void 0, {
+        focusable: false
+      }, props);
+    }
     props = _AV6KTKLEcjs.__spreadValues.call(void 0, {
       role: "tablist",
       "aria-orientation": orientation
     }, props);
-    props = _NCXCQQBNcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    props = _EKW5CERCcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
     return props;
   }
 );
-var TabList = _Q67LZMDTcjs.forwardRef.call(void 0, function TabList2(props) {
+var TabList = _NGD3IQDBcjs.forwardRef.call(void 0, function TabList2(props) {
   const htmlProps = useTabList(props);
-  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);
 });
 
 

package/cjs/tab/tab-panel.cjs

@@ -1,36 +1,37 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _XWCNZ2IPcjs = require('../__chunks/XWCNZ2IP.cjs');
+var _HD5AHCRIcjs = require('../__chunks/HD5AHCRI.cjs');
 
 
 
-var _R3OO4M3Ncjs = require('../__chunks/R3OO4M3N.cjs');
-require('../__chunks/4XFLDG56.cjs');
-require('../__chunks/Q6CVYJBO.cjs');
+var _5CAFC273cjs = require('../__chunks/5CAFC273.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
 
 
-var _JFOUIQSFcjs = require('../__chunks/JFOUIQSF.cjs');
-require('../__chunks/OLPMMKKO.cjs');
-require('../__chunks/XRJBC7H7.cjs');
+var _7CYY7U2Acjs = require('../__chunks/7CYY7U2A.cjs');
+require('../__chunks/GDEDCFNU.cjs');
+require('../__chunks/NTNMOEWE.cjs');
 
 
-var _5QD55NKLcjs = require('../__chunks/5QD55NKL.cjs');
+var _FHRIPOYFcjs = require('../__chunks/FHRIPOYF.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
-var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
+var _NGD3IQDBcjs = require('../__chunks/NGD3IQDB.cjs');
 
 
-var _QJZAESARcjs = require('../__chunks/QJZAESAR.cjs');
-require('../__chunks/OLOZ5JT2.cjs');
+var _N6YOHUBIcjs = require('../__chunks/N6YOHUBI.cjs');
+require('../__chunks/GXMZA6DT.cjs');
 
 
 
 
-var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
+
+var _TW3SFX4Ccjs = require('../__chunks/TW3SFX4C.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 
 
@@ -40,29 +41,32 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/tab/tab-panel.tsx
 var _react = require('react');
+var _tabstore = require('@ariakit/core/tab/tab-store');
 var _focus = require('@ariakit/core/utils/focus');
 var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
 var TagName = "div";
-var useTabPanel = _Q67LZMDTcjs.createHook.call(void 0, 
+var useTabPanel = _NGD3IQDBcjs.createHook.call(void 0, 
   function useTabPanel2(_a) {
     var _b = _a, {
       store,
+      unmountOnHide,
       tabId: tabIdProp,
       getItem: getItemProp
     } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
       "store",
+      "unmountOnHide",
       "tabId",
       "getItem"
     ]);
-    const context = _R3OO4M3Ncjs.useTabProviderContext.call(void 0, );
+    const context = _5CAFC273cjs.useTabProviderContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
       process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
     );
     const ref = _react.useRef.call(void 0, null);
-    const id = _EO6LS72Hcjs.useId.call(void 0, props.id);
+    const id = _TW3SFX4Ccjs.useId.call(void 0, props.id);
     const [hasTabbableChildren, setHasTabbableChildren] = _react.useState.call(void 0, false);
     _react.useEffect.call(void 0, () => {
       const element = ref.current;
@@ -81,9 +85,34 @@ var useTabPanel = _Q67LZMDTcjs.createHook.call(void 0,
       },
       [id, tabIdProp, getItemProp]
     );
-    props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
+    const onKeyDownProp = props.onKeyDown;
+    const onKeyDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (!(store == null ? void 0 : store.composite))
+        return;
+      const { items, renderedItems, selectedId } = store.getState();
+      const tab = _tabstore.createTabStore.call(void 0, { items, activeId: selectedId });
+      tab.setState("renderedItems", renderedItems);
+      const keyMap = {
+        ArrowLeft: tab.previous,
+        ArrowRight: tab.next,
+        Home: tab.first,
+        End: tab.last
+      };
+      const action = keyMap[event.key];
+      if (!action)
+        return;
+      const nextId = action();
+      if (!nextId)
+        return;
+      event.preventDefault();
+      store.select(nextId);
+    });
+    props = _TW3SFX4Ccjs.useWrapElement.call(void 0, 
       props,
-      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _R3OO4M3Ncjs.TabScopedContextProvider, { value: store, children: element }),
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5CAFC273cjs.TabScopedContextProvider, { value: store, children: element }),
       [store]
     );
     const tabId = store.panels.useState(
@@ -100,18 +129,35 @@ var useTabPanel = _Q67LZMDTcjs.createHook.call(void 0,
       role: "tabpanel",
       "aria-labelledby": tabId || void 0
     }, props), {
-      ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, ref, props.ref)
+      ref: _TW3SFX4Ccjs.useMergeRefs.call(void 0, ref, props.ref),
+      onKeyDown
     });
-    const disclosure = _QJZAESARcjs.useDisclosureStore.call(void 0, { open });
-    props = _5QD55NKLcjs.useFocusable.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { focusable: !hasTabbableChildren }, props));
-    props = _JFOUIQSFcjs.useDisclosureContent.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store: disclosure }, props));
-    props = _XWCNZ2IPcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store: store.panels }, props), { getItem }));
+    const disclosure = _N6YOHUBIcjs.useDisclosureStore.call(void 0, { open });
+    const mounted = disclosure.useState("mounted");
+    props = _TW3SFX4Ccjs.useWrapElement.call(void 0, 
+      props,
+      (element) => {
+        if (!unmountOnHide)
+          return element;
+        if (!mounted)
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, {});
+        return element;
+      },
+      [unmountOnHide, mounted]
+    );
+    props = _FHRIPOYFcjs.useFocusable.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+      // If the tab panel is rendered as part of another composite widget such
+      // as combobox, it should not be focusable.
+      focusable: !store.composite && !hasTabbableChildren
+    }, props));
+    props = _7CYY7U2Acjs.useDisclosureContent.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store: disclosure }, props));
+    props = _HD5AHCRIcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store: store.panels }, props), { getItem }));
     return props;
   }
 );
-var TabPanel = _Q67LZMDTcjs.forwardRef.call(void 0, function TabPanel2(props) {
+var TabPanel = _NGD3IQDBcjs.forwardRef.call(void 0, function TabPanel2(props) {
   const htmlProps = useTabPanel(props);
-  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+  return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);
 });
 
 

package/cjs/tab/tab-panel.d.cts

@@ -44,7 +44,7 @@ export declare const useTabPanel: import("../utils/types.js").Hook<"div", TabPan
  * ```
  */
 export declare const TabPanel: (props: TabPanelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export interface TabPanelOptions<T extends ElementType = TagName> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store" | "unmountOnHide"> {
+export interface TabPanelOptions<T extends ElementType = TagName> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store"> {
     /**
      * Object returned by the
      * [`useTabStore`](https://ariakit.org/reference/use-tab-store) hook. If not
@@ -68,6 +68,7 @@ export interface TabPanelOptions<T extends ElementType = TagName> extends Focusa
      * Live examples:
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * - [Tab with React Router](https://ariakit.org/examples/tab-react-router)
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
     tabId?: string | null;
 }

package/cjs/tab/tab-panel.d.ts

@@ -44,7 +44,7 @@ export declare const useTabPanel: import("../utils/types.js").Hook<"div", TabPan
  * ```
  */
 export declare const TabPanel: (props: TabPanelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-export interface TabPanelOptions<T extends ElementType = TagName> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store" | "unmountOnHide"> {
+export interface TabPanelOptions<T extends ElementType = TagName> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store"> {
     /**
      * Object returned by the
      * [`useTabStore`](https://ariakit.org/reference/use-tab-store) hook. If not
@@ -68,6 +68,7 @@ export interface TabPanelOptions<T extends ElementType = TagName> extends Focusa
      * Live examples:
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * - [Tab with React Router](https://ariakit.org/examples/tab-react-router)
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
     tabId?: string | null;
 }

package/cjs/tab/tab-provider.cjs

@@ -1,25 +1,25 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _3XQOWQTTcjs = require('../__chunks/3XQOWQTT.cjs');
+var _RKBJS357cjs = require('../__chunks/RKBJS357.cjs');
 
 
-var _R3OO4M3Ncjs = require('../__chunks/R3OO4M3N.cjs');
-require('../__chunks/LUL2YWZ3.cjs');
-require('../__chunks/CDNJPIEG.cjs');
-require('../__chunks/4XFLDG56.cjs');
-require('../__chunks/Q6CVYJBO.cjs');
-require('../__chunks/Q67LZMDT.cjs');
-require('../__chunks/OLOZ5JT2.cjs');
-require('../__chunks/EO6LS72H.cjs');
+var _5CAFC273cjs = require('../__chunks/5CAFC273.cjs');
+require('../__chunks/4H5ZMMOI.cjs');
+require('../__chunks/Q7DU7FP7.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/GXMZA6DT.cjs');
+require('../__chunks/TW3SFX4C.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 // src/tab/tab-provider.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function TabProvider(props = {}) {
-  const store = _3XQOWQTTcjs.useTabStore.call(void 0, props);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _R3OO4M3Ncjs.TabContextProvider, { value: store, children: props.children });
+  const store = _RKBJS357cjs.useTabStore.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _5CAFC273cjs.TabContextProvider, { value: store, children: props.children });
 }
 
 

package/cjs/tab/tab-store.cjs

@@ -2,14 +2,17 @@
 
 
 
-var _3XQOWQTTcjs = require('../__chunks/3XQOWQTT.cjs');
-require('../__chunks/LUL2YWZ3.cjs');
-require('../__chunks/CDNJPIEG.cjs');
-require('../__chunks/OLOZ5JT2.cjs');
-require('../__chunks/EO6LS72H.cjs');
+var _RKBJS357cjs = require('../__chunks/RKBJS357.cjs');
+require('../__chunks/4H5ZMMOI.cjs');
+require('../__chunks/Q7DU7FP7.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/GXMZA6DT.cjs');
+require('../__chunks/TW3SFX4C.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.useTabStore = _3XQOWQTTcjs.useTabStore; exports.useTabStoreProps = _3XQOWQTTcjs.useTabStoreProps;
+exports.useTabStore = _RKBJS357cjs.useTabStore; exports.useTabStoreProps = _RKBJS357cjs.useTabStoreProps;

package/cjs/tab/tab-store.d.cts

@@ -1,5 +1,5 @@
 import * as Core from "@ariakit/core/tab/tab-store";
-import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { CompositeStore, CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { Store } from "../utils/store.js";
 export declare function useTabStoreProps<T extends Core.TabStore>(store: T, update: () => void, props: TabStoreProps): T & {
     panels: import("@ariakit/core/collection/collection-store").CollectionStore<Core.TabStorePanel> & {
@@ -9,6 +9,8 @@ export declare function useTabStoreProps<T extends Core.TabStore>(store: T, upda
             <V>(selector: (state: import("@ariakit/core/collection/collection-store").CollectionStoreState<Core.TabStorePanel>) => V): V;
         };
     };
+} & {
+    composite: CompositeStore<import("../composite/composite-store.js").CompositeStoreItem> | null | undefined;
 };
 /**
  * Creates a tab store to control the state of
@@ -31,10 +33,10 @@ export interface TabStoreItem extends Core.TabStoreItem {
 }
 export interface TabStoreState extends Core.TabStoreState, CompositeStoreState<TabStoreItem> {
 }
-export interface TabStoreFunctions extends Core.TabStoreFunctions, CompositeStoreFunctions<TabStoreItem> {
+export interface TabStoreFunctions extends Pick<TabStoreOptions, "composite">, Omit<Core.TabStoreFunctions, "panels" | "composite">, CompositeStoreFunctions<TabStoreItem> {
     panels: Store<Core.TabStoreFunctions["panels"]>;
 }
-export interface TabStoreOptions extends Core.TabStoreOptions, CompositeStoreOptions<TabStoreItem> {
+export interface TabStoreOptions extends Omit<Core.TabStoreOptions, "composite">, CompositeStoreOptions<TabStoreItem> {
     /**
      * Function that will be called when the
      * [`selectedId`](https://ariakit.org/reference/tab-provider#selectedid) state
@@ -44,8 +46,16 @@ export interface TabStoreOptions extends Core.TabStoreOptions, CompositeStoreOpt
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     setSelectedId?: (selectedId: TabStoreState["selectedId"]) => void;
+    /**
+     * A reference to another [composite
+     * store](https://ariakit.org/reference/use-composite-store). It's
+     * automatically set when rendering tabs within another composite widget like
+     * [Combobox](https://ariakit.org/components/combobox) or
+     * [Select](https://ariakit.org/components/select).
+     */
+    composite?: CompositeStore | null;
 }
-export interface TabStoreProps extends TabStoreOptions, Core.TabStoreProps {
+export interface TabStoreProps extends TabStoreOptions, Omit<Core.TabStoreProps, "composite"> {
 }
-export interface TabStore extends TabStoreFunctions, Omit<Store<Core.TabStore>, "panels"> {
+export interface TabStore extends TabStoreFunctions, Omit<Store<Core.TabStore>, "panels" | "composite"> {
 }

package/cjs/tab/tab-store.d.ts

@@ -1,5 +1,5 @@
 import * as Core from "@ariakit/core/tab/tab-store";
-import type { CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { CompositeStore, CompositeStoreFunctions, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { Store } from "../utils/store.js";
 export declare function useTabStoreProps<T extends Core.TabStore>(store: T, update: () => void, props: TabStoreProps): T & {
     panels: import("@ariakit/core/collection/collection-store").CollectionStore<Core.TabStorePanel> & {
@@ -9,6 +9,8 @@ export declare function useTabStoreProps<T extends Core.TabStore>(store: T, upda
             <V>(selector: (state: import("@ariakit/core/collection/collection-store").CollectionStoreState<Core.TabStorePanel>) => V): V;
         };
     };
+} & {
+    composite: CompositeStore<import("../composite/composite-store.js").CompositeStoreItem> | null | undefined;
 };
 /**
  * Creates a tab store to control the state of
@@ -31,10 +33,10 @@ export interface TabStoreItem extends Core.TabStoreItem {
 }
 export interface TabStoreState extends Core.TabStoreState, CompositeStoreState<TabStoreItem> {
 }
-export interface TabStoreFunctions extends Core.TabStoreFunctions, CompositeStoreFunctions<TabStoreItem> {
+export interface TabStoreFunctions extends Pick<TabStoreOptions, "composite">, Omit<Core.TabStoreFunctions, "panels" | "composite">, CompositeStoreFunctions<TabStoreItem> {
     panels: Store<Core.TabStoreFunctions["panels"]>;
 }
-export interface TabStoreOptions extends Core.TabStoreOptions, CompositeStoreOptions<TabStoreItem> {
+export interface TabStoreOptions extends Omit<Core.TabStoreOptions, "composite">, CompositeStoreOptions<TabStoreItem> {
     /**
      * Function that will be called when the
      * [`selectedId`](https://ariakit.org/reference/tab-provider#selectedid) state
@@ -44,8 +46,16 @@ export interface TabStoreOptions extends Core.TabStoreOptions, CompositeStoreOpt
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     setSelectedId?: (selectedId: TabStoreState["selectedId"]) => void;
+    /**
+     * A reference to another [composite
+     * store](https://ariakit.org/reference/use-composite-store). It's
+     * automatically set when rendering tabs within another composite widget like
+     * [Combobox](https://ariakit.org/components/combobox) or
+     * [Select](https://ariakit.org/components/select).
+     */
+    composite?: CompositeStore | null;
 }
-export interface TabStoreProps extends TabStoreOptions, Core.TabStoreProps {
+export interface TabStoreProps extends TabStoreOptions, Omit<Core.TabStoreProps, "composite"> {
 }
-export interface TabStore extends TabStoreFunctions, Omit<Store<Core.TabStore>, "panels"> {
+export interface TabStore extends TabStoreFunctions, Omit<Store<Core.TabStore>, "panels" | "composite"> {
 }