@ariakit/react-core 0.3.14 → 0.4.0

package/cjs/select/select.d.cts

@@ -1,9 +1,11 @@
-import type { KeyboardEvent, MouseEvent, SelectHTMLAttributes } from "react";
+import type { ElementType, KeyboardEvent, MouseEvent, SelectHTMLAttributes } from "react";
 import type { BooleanOrCallback } from "@ariakit/core/utils/types";
 import type { CompositeTypeaheadOptions } from "../composite/composite-typeahead.js";
 import type { PopoverDisclosureOptions } from "../popover/popover-disclosure.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { SelectStore } from "./select-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Select` component.
  * @see https://ariakit.org/components/select
@@ -14,7 +16,7 @@ import type { SelectStore } from "./select-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useSelect: import("../utils/types.js").Hook<SelectOptions<"button">>;
+export declare const useSelect: import("../utils/types.js").Hook<"button", SelectOptions<"button">>;
 /**
  * Renders a custom select element that controls the visibility of either a
  * [`SelectList`](https://ariakit.org/reference/select-list) or a
@@ -37,8 +39,8 @@ export declare const useSelect: import("../utils/types.js").Hook<SelectOptions<"
  * </SelectProvider>
  * ```
  */
-export declare const Select: import("../utils/types.js").Component<SelectOptions<"button">>;
-export interface SelectOptions<T extends As = "button"> extends PopoverDisclosureOptions<T>, CompositeTypeaheadOptions<T>, Pick<SelectHTMLAttributes<HTMLSelectElement>, "name" | "form" | "required"> {
+export declare const Select: (props: SelectProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectOptions<T extends ElementType = TagName> extends PopoverDisclosureOptions<T>, CompositeTypeaheadOptions<T>, Pick<SelectHTMLAttributes<HTMLSelectElement>, "name" | "form" | "required"> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -93,4 +95,5 @@ export interface SelectOptions<T extends As = "button"> extends PopoverDisclosur
      */
     toggleOnPress?: BooleanOrCallback<MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>>;
 }
-export type SelectProps<T extends As = "button"> = Props<SelectOptions<T>>;
+export type SelectProps<T extends ElementType = TagName> = Props<T, SelectOptions<T>>;
+export {};

package/cjs/select/select.d.ts

@@ -1,9 +1,11 @@
-import type { KeyboardEvent, MouseEvent, SelectHTMLAttributes } from "react";
+import type { ElementType, KeyboardEvent, MouseEvent, SelectHTMLAttributes } from "react";
 import type { BooleanOrCallback } from "@ariakit/core/utils/types";
 import type { CompositeTypeaheadOptions } from "../composite/composite-typeahead.js";
 import type { PopoverDisclosureOptions } from "../popover/popover-disclosure.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { SelectStore } from "./select-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Select` component.
  * @see https://ariakit.org/components/select
@@ -14,7 +16,7 @@ import type { SelectStore } from "./select-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useSelect: import("../utils/types.js").Hook<SelectOptions<"button">>;
+export declare const useSelect: import("../utils/types.js").Hook<"button", SelectOptions<"button">>;
 /**
  * Renders a custom select element that controls the visibility of either a
  * [`SelectList`](https://ariakit.org/reference/select-list) or a
@@ -37,8 +39,8 @@ export declare const useSelect: import("../utils/types.js").Hook<SelectOptions<"
  * </SelectProvider>
  * ```
  */
-export declare const Select: import("../utils/types.js").Component<SelectOptions<"button">>;
-export interface SelectOptions<T extends As = "button"> extends PopoverDisclosureOptions<T>, CompositeTypeaheadOptions<T>, Pick<SelectHTMLAttributes<HTMLSelectElement>, "name" | "form" | "required"> {
+export declare const Select: (props: SelectProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectOptions<T extends ElementType = TagName> extends PopoverDisclosureOptions<T>, CompositeTypeaheadOptions<T>, Pick<SelectHTMLAttributes<HTMLSelectElement>, "name" | "form" | "required"> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -93,4 +95,5 @@ export interface SelectOptions<T extends As = "button"> extends PopoverDisclosur
      */
     toggleOnPress?: BooleanOrCallback<MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>>;
 }
-export type SelectProps<T extends As = "button"> = Props<SelectOptions<T>>;
+export type SelectProps<T extends ElementType = TagName> = Props<T, SelectOptions<T>>;
+export {};

package/cjs/separator/separator.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _QOD2KY3Ncjs = require('../__chunks/QOD2KY3N.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _FG4Y7VYMcjs = require('../__chunks/FG4Y7VYM.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Separator = _QOD2KY3Ncjs.Separator; exports.useSeparator = _QOD2KY3Ncjs.useSeparator;
+exports.Separator = _FG4Y7VYMcjs.Separator; exports.useSeparator = _FG4Y7VYMcjs.useSeparator;

package/cjs/separator/separator.d.cts

@@ -1,4 +1,7 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "hr";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Separator` component.
  * @see https://ariakit.org/components/separator
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props} />
  * ```
  */
-export declare const useSeparator: import("../utils/types.js").Hook<SeparatorOptions<"hr">>;
+export declare const useSeparator: import("../utils/types.js").Hook<"hr", SeparatorOptions<"hr">>;
 /**
  * Renders a separator element.
  * @see https://ariakit.org/components/separator
@@ -17,12 +20,13 @@ export declare const useSeparator: import("../utils/types.js").Hook<SeparatorOpt
  * <Separator orientation="horizontal" />
  * ```
  */
-export declare const Separator: import("../utils/types.js").Component<SeparatorOptions<"hr">>;
-export interface SeparatorOptions<T extends As = "hr"> extends Options<T> {
+export declare const Separator: (props: SeparatorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SeparatorOptions<_T extends ElementType = TagName> extends Options {
     /**
      * The orientation of the separator.
      * @default "horizontal"
      */
     orientation?: "horizontal" | "vertical";
 }
-export type SeparatorProps<T extends As = "hr"> = Props<SeparatorOptions<T>>;
+export type SeparatorProps<T extends ElementType = TagName> = Props<T, SeparatorOptions<T>>;
+export {};

package/cjs/separator/separator.d.ts

@@ -1,4 +1,7 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "hr";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Separator` component.
  * @see https://ariakit.org/components/separator
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props} />
  * ```
  */
-export declare const useSeparator: import("../utils/types.js").Hook<SeparatorOptions<"hr">>;
+export declare const useSeparator: import("../utils/types.js").Hook<"hr", SeparatorOptions<"hr">>;
 /**
  * Renders a separator element.
  * @see https://ariakit.org/components/separator
@@ -17,12 +20,13 @@ export declare const useSeparator: import("../utils/types.js").Hook<SeparatorOpt
  * <Separator orientation="horizontal" />
  * ```
  */
-export declare const Separator: import("../utils/types.js").Component<SeparatorOptions<"hr">>;
-export interface SeparatorOptions<T extends As = "hr"> extends Options<T> {
+export declare const Separator: (props: SeparatorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SeparatorOptions<_T extends ElementType = TagName> extends Options {
     /**
      * The orientation of the separator.
      * @default "horizontal"
      */
     orientation?: "horizontal" | "vertical";
 }
-export type SeparatorProps<T extends As = "hr"> = Props<SeparatorOptions<T>>;
+export type SeparatorProps<T extends ElementType = TagName> = Props<T, SeparatorOptions<T>>;
+export {};

package/cjs/tab/tab-context.cjs

@@ -5,10 +5,10 @@
 
 
 
-var _I65V32V2cjs = require('../__chunks/I65V32V2.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _R3OO4M3Ncjs = require('../__chunks/R3OO4M3N.cjs');
+require('../__chunks/4XFLDG56.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -18,4 +18,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.TabContextProvider = _I65V32V2cjs.TabContextProvider; exports.TabScopedContextProvider = _I65V32V2cjs.TabScopedContextProvider; exports.useTabContext = _I65V32V2cjs.useTabContext; exports.useTabProviderContext = _I65V32V2cjs.useTabProviderContext; exports.useTabScopedContext = _I65V32V2cjs.useTabScopedContext;
+exports.TabContextProvider = _R3OO4M3Ncjs.TabContextProvider; exports.TabScopedContextProvider = _R3OO4M3Ncjs.TabScopedContextProvider; exports.useTabContext = _R3OO4M3Ncjs.useTabContext; exports.useTabProviderContext = _R3OO4M3Ncjs.useTabProviderContext; exports.useTabScopedContext = _R3OO4M3Ncjs.useTabScopedContext;

package/cjs/tab/tab-list.cjs

@@ -2,20 +2,20 @@
 
 
 
-var _I65V32V2cjs = require('../__chunks/I65V32V2.cjs');
+var _R3OO4M3Ncjs = require('../__chunks/R3OO4M3N.cjs');
 
 
-var _H6OLBVHAcjs = require('../__chunks/H6OLBVHA.cjs');
+var _NCXCQQBNcjs = require('../__chunks/NCXCQQBN.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/4XFLDG56.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/5QD55NKL.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 
 
 var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
@@ -28,36 +28,36 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 // src/tab/tab-list.tsx
 var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
-var useTabList = _RNZNGEL4cjs.createHook.call(void 0, (_a) => {
-  var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
-  const context = _I65V32V2cjs.useTabProviderContext.call(void 0, );
-  store = store || context;
-  _misc.invariant.call(void 0, 
-    store,
-    process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
-  );
-  const orientation = store.useState(
-    (state) => state.orientation === "both" ? void 0 : state.orientation
-  );
-  props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
-    props,
-    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _I65V32V2cjs.TabScopedContextProvider, { value: store, children: element }),
-    [store]
-  );
-  props = _AV6KTKLEcjs.__spreadValues.call(void 0, {
-    role: "tablist",
-    "aria-orientation": orientation
-  }, props);
-  props = _H6OLBVHAcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
-  return props;
-});
-var TabList = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
+var TagName = "div";
+var useTabList = _Q67LZMDTcjs.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, );
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
+    );
+    const orientation = store.useState(
+      (state) => state.orientation === "both" ? void 0 : state.orientation
+    );
+    props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
+      props,
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _R3OO4M3Ncjs.TabScopedContextProvider, { value: store, children: element }),
+      [store]
+    );
+    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));
+    return props;
+  }
+);
+var TabList = _Q67LZMDTcjs.forwardRef.call(void 0, function TabList2(props) {
   const htmlProps = useTabList(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  TabList.displayName = "TabList";
-}
 
 
 

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CompositeOptions } from "../composite/composite.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { TabStore } from "./tab-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `TabList` component.
  * @see https://ariakit.org/components/tab
@@ -16,7 +19,7 @@ import type { TabStore } from "./tab-store.js";
  * <TabPanel store={store}>Panel 2</TabPanel>
  * ```
  */
-export declare const useTabList: import("../utils/types.js").Hook<TabListOptions<"div">>;
+export declare const useTabList: import("../utils/types.js").Hook<"div", TabListOptions<"div">>;
 /**
  * Renders a composite tab list wrapper for
  * [`Tab`](https://ariakit.org/reference/tab) elements.
@@ -33,8 +36,8 @@ export declare const useTabList: import("../utils/types.js").Hook<TabListOptions
  * </TabProvider>
  * ```
  */
-export declare const TabList: import("../utils/types.js").Component<TabListOptions<"div">>;
-export interface TabListOptions<T extends As = "div"> extends CompositeOptions<T> {
+export declare const TabList: (props: TabListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TabListOptions<T extends ElementType = TagName> extends CompositeOptions<T> {
     /**
      * Object returned by the
      * [`useTabStore`](https://ariakit.org/reference/use-tab-store) hook. If not
@@ -44,4 +47,5 @@ export interface TabListOptions<T extends As = "div"> extends CompositeOptions<T
      */
     store?: TabStore;
 }
-export type TabListProps<T extends As = "div"> = Props<TabListOptions<T>>;
+export type TabListProps<T extends ElementType = TagName> = Props<T, TabListOptions<T>>;
+export {};

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CompositeOptions } from "../composite/composite.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { TabStore } from "./tab-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `TabList` component.
  * @see https://ariakit.org/components/tab
@@ -16,7 +19,7 @@ import type { TabStore } from "./tab-store.js";
  * <TabPanel store={store}>Panel 2</TabPanel>
  * ```
  */
-export declare const useTabList: import("../utils/types.js").Hook<TabListOptions<"div">>;
+export declare const useTabList: import("../utils/types.js").Hook<"div", TabListOptions<"div">>;
 /**
  * Renders a composite tab list wrapper for
  * [`Tab`](https://ariakit.org/reference/tab) elements.
@@ -33,8 +36,8 @@ export declare const useTabList: import("../utils/types.js").Hook<TabListOptions
  * </TabProvider>
  * ```
  */
-export declare const TabList: import("../utils/types.js").Component<TabListOptions<"div">>;
-export interface TabListOptions<T extends As = "div"> extends CompositeOptions<T> {
+export declare const TabList: (props: TabListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TabListOptions<T extends ElementType = TagName> extends CompositeOptions<T> {
     /**
      * Object returned by the
      * [`useTabStore`](https://ariakit.org/reference/use-tab-store) hook. If not
@@ -44,4 +47,5 @@ export interface TabListOptions<T extends As = "div"> extends CompositeOptions<T
      */
     store?: TabStore;
 }
-export type TabListProps<T extends As = "div"> = Props<TabListOptions<T>>;
+export type TabListProps<T extends ElementType = TagName> = Props<T, TabListOptions<T>>;
+export {};

package/cjs/tab/tab-panel.cjs

@@ -1,30 +1,30 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _R5A2WTWBcjs = require('../__chunks/R5A2WTWB.cjs');
+var _XWCNZ2IPcjs = require('../__chunks/XWCNZ2IP.cjs');
 
 
 
-var _I65V32V2cjs = require('../__chunks/I65V32V2.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
+var _R3OO4M3Ncjs = require('../__chunks/R3OO4M3N.cjs');
+require('../__chunks/4XFLDG56.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
 
 
-var _YPVQYY4Jcjs = require('../__chunks/YPVQYY4J.cjs');
-require('../__chunks/F2A2ZQDB.cjs');
-require('../__chunks/S6UU7NA4.cjs');
+var _JFOUIQSFcjs = require('../__chunks/JFOUIQSF.cjs');
+require('../__chunks/OLPMMKKO.cjs');
+require('../__chunks/XRJBC7H7.cjs');
 
 
-var _Z3GCTNW4cjs = require('../__chunks/Z3GCTNW4.cjs');
+var _5QD55NKLcjs = require('../__chunks/5QD55NKL.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 
 
-var _JAQJG42Rcjs = require('../__chunks/JAQJG42R.cjs');
+var _QJZAESARcjs = require('../__chunks/QJZAESAR.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 
 
@@ -43,10 +43,19 @@ var _react = require('react');
 var _focus = require('@ariakit/core/utils/focus');
 var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
-var useTabPanel = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
-    var _b = _a, { store, tabId: tabIdProp, getItem: getItemProp } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "tabId", "getItem"]);
-    const context = _I65V32V2cjs.useTabProviderContext.call(void 0, );
+var TagName = "div";
+var useTabPanel = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useTabPanel2(_a) {
+    var _b = _a, {
+      store,
+      tabId: tabIdProp,
+      getItem: getItemProp
+    } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
+      "store",
+      "tabId",
+      "getItem"
+    ]);
+    const context = _R3OO4M3Ncjs.useTabProviderContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -74,7 +83,7 @@ var useTabPanel = _RNZNGEL4cjs.createHook.call(void 0,
     );
     props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
       props,
-      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _I65V32V2cjs.TabScopedContextProvider, { value: store, children: element }),
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _R3OO4M3Ncjs.TabScopedContextProvider, { value: store, children: element }),
       [store]
     );
     const tabId = store.panels.useState(
@@ -93,20 +102,17 @@ var useTabPanel = _RNZNGEL4cjs.createHook.call(void 0,
     }, props), {
       ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, ref, props.ref)
     });
-    const disclosure = _JAQJG42Rcjs.useDisclosureStore.call(void 0, { open });
-    props = _Z3GCTNW4cjs.useFocusable.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { focusable: !hasTabbableChildren }, props));
-    props = _YPVQYY4Jcjs.useDisclosureContent.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store: disclosure }, props));
-    props = _R5A2WTWBcjs.useCollectionItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store: store.panels }, props), { getItem }));
+    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 }));
     return props;
   }
 );
-var TabPanel = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
+var TabPanel = _Q67LZMDTcjs.forwardRef.call(void 0, function TabPanel2(props) {
   const htmlProps = useTabPanel(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  TabPanel.displayName = "TabPanel";
-}
 
 
 

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

@@ -1,8 +1,11 @@
+import type { ElementType } from "react";
 import type { CollectionItemOptions } from "../collection/collection-item.js";
 import type { DisclosureContentOptions } from "../disclosure/disclosure-content.jsx";
 import type { FocusableOptions } from "../focusable/focusable.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { TabStore } from "./tab-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `TabPanel` component.
  * @see https://ariakit.org/components/tab
@@ -16,7 +19,7 @@ import type { TabStore } from "./tab-store.js";
  * <Role {...props}>Panel 1</Role>
  * ```
  */
-export declare const useTabPanel: import("../utils/types.js").Hook<TabPanelOptions<"div">>;
+export declare const useTabPanel: import("../utils/types.js").Hook<"div", TabPanelOptions<"div">>;
 /**
  * Renders a tab panel element that's controlled by a
  * [`Tab`](https://ariakit.org/reference/tab) component.
@@ -40,8 +43,8 @@ export declare const useTabPanel: import("../utils/types.js").Hook<TabPanelOptio
  * </TabProvider>
  * ```
  */
-export declare const TabPanel: import("../utils/types.js").Component<TabPanelOptions<"div">>;
-export interface TabPanelOptions<T extends As = "div"> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store" | "unmountOnHide"> {
+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"> {
     /**
      * Object returned by the
      * [`useTabStore`](https://ariakit.org/reference/use-tab-store) hook. If not
@@ -68,4 +71,5 @@ export interface TabPanelOptions<T extends As = "div"> extends FocusableOptions<
      */
     tabId?: string | null;
 }
-export type TabPanelProps<T extends As = "div"> = Props<TabPanelOptions<T>>;
+export type TabPanelProps<T extends ElementType = TagName> = Props<T, TabPanelOptions<T>>;
+export {};

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

@@ -1,8 +1,11 @@
+import type { ElementType } from "react";
 import type { CollectionItemOptions } from "../collection/collection-item.js";
 import type { DisclosureContentOptions } from "../disclosure/disclosure-content.jsx";
 import type { FocusableOptions } from "../focusable/focusable.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { TabStore } from "./tab-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `TabPanel` component.
  * @see https://ariakit.org/components/tab
@@ -16,7 +19,7 @@ import type { TabStore } from "./tab-store.js";
  * <Role {...props}>Panel 1</Role>
  * ```
  */
-export declare const useTabPanel: import("../utils/types.js").Hook<TabPanelOptions<"div">>;
+export declare const useTabPanel: import("../utils/types.js").Hook<"div", TabPanelOptions<"div">>;
 /**
  * Renders a tab panel element that's controlled by a
  * [`Tab`](https://ariakit.org/reference/tab) component.
@@ -40,8 +43,8 @@ export declare const useTabPanel: import("../utils/types.js").Hook<TabPanelOptio
  * </TabProvider>
  * ```
  */
-export declare const TabPanel: import("../utils/types.js").Component<TabPanelOptions<"div">>;
-export interface TabPanelOptions<T extends As = "div"> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store" | "unmountOnHide"> {
+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"> {
     /**
      * Object returned by the
      * [`useTabStore`](https://ariakit.org/reference/use-tab-store) hook. If not
@@ -68,4 +71,5 @@ export interface TabPanelOptions<T extends As = "div"> extends FocusableOptions<
      */
     tabId?: string | null;
 }
-export type TabPanelProps<T extends As = "div"> = Props<TabPanelOptions<T>>;
+export type TabPanelProps<T extends ElementType = TagName> = Props<T, TabPanelOptions<T>>;
+export {};

package/cjs/tab/tab-provider.cjs

@@ -4,12 +4,12 @@
 var _3XQOWQTTcjs = require('../__chunks/3XQOWQTT.cjs');
 
 
-var _I65V32V2cjs = require('../__chunks/I65V32V2.cjs');
+var _R3OO4M3Ncjs = require('../__chunks/R3OO4M3N.cjs');
 require('../__chunks/LUL2YWZ3.cjs');
 require('../__chunks/CDNJPIEG.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/4XFLDG56.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -19,7 +19,7 @@ require('../__chunks/AV6KTKLE.cjs');
 var _jsxruntime = require('react/jsx-runtime');
 function TabProvider(props = {}) {
   const store = _3XQOWQTTcjs.useTabStore.call(void 0, props);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _I65V32V2cjs.TabContextProvider, { value: store, children: props.children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _R3OO4M3Ncjs.TabContextProvider, { value: store, children: props.children });
 }