@ariakit/react-core 0.3.14 → 0.4.1

package/cjs/disclosure/disclosure-content.d.ts

@@ -1,5 +1,8 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
 import type { DisclosureStore } from "./disclosure-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 export declare function isHidden(mounted: boolean, hidden?: boolean | null, alwaysVisible?: boolean | null): boolean;
 /**
  * Returns props to create a `DislosureContent` component.
@@ -12,7 +15,7 @@ export declare function isHidden(mounted: boolean, hidden?: boolean | null, alwa
  * <Role {...props}>Content</Role>
  * ```
  */
-export declare const useDisclosureContent: import("../utils/types.js").Hook<DisclosureContentOptions<"div">>;
+export declare const useDisclosureContent: import("../utils/types.js").Hook<"div", DisclosureContentOptions<"div">>;
 /**
  * Renders an element that can be shown or hidden by a
  * [`Disclosure`](https://ariakit.org/components/disclosure) component.
@@ -25,8 +28,8 @@ export declare const useDisclosureContent: import("../utils/types.js").Hook<Disc
  * </DisclosureProvider>
  * ```
  */
-export declare const DisclosureContent: import("../utils/types.js").Component<DisclosureContentOptions<"div">>;
-export interface DisclosureContentOptions<T extends As = "div"> extends Options<T> {
+export declare const DisclosureContent: ({ unmountOnHide, ...props }: DisclosureContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export interface DisclosureContentOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useDisclosureStore`](https://ariakit.org/reference/use-disclosure-store)
@@ -74,4 +77,5 @@ export interface DisclosureContentOptions<T extends As = "div"> extends Options<
      */
     unmountOnHide?: boolean;
 }
-export type DisclosureContentProps<T extends As = "div"> = Props<DisclosureContentOptions<T>>;
+export type DisclosureContentProps<T extends ElementType = TagName> = Props<T, DisclosureContentOptions<T>>;
+export {};

package/cjs/disclosure/disclosure-context.cjs

@@ -5,8 +5,8 @@
 
 
 
-var _S6UU7NA4cjs = require('../__chunks/S6UU7NA4.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _XRJBC7H7cjs = require('../__chunks/XRJBC7H7.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -16,4 +16,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.DisclosureContextProvider = _S6UU7NA4cjs.DisclosureContextProvider; exports.DisclosureScopedContextProvider = _S6UU7NA4cjs.DisclosureScopedContextProvider; exports.useDisclosureContext = _S6UU7NA4cjs.useDisclosureContext; exports.useDisclosureProviderContext = _S6UU7NA4cjs.useDisclosureProviderContext; exports.useDisclosureScopedContext = _S6UU7NA4cjs.useDisclosureScopedContext;
+exports.DisclosureContextProvider = _XRJBC7H7cjs.DisclosureContextProvider; exports.DisclosureScopedContextProvider = _XRJBC7H7cjs.DisclosureScopedContextProvider; exports.useDisclosureContext = _XRJBC7H7cjs.useDisclosureContext; exports.useDisclosureProviderContext = _XRJBC7H7cjs.useDisclosureProviderContext; exports.useDisclosureScopedContext = _XRJBC7H7cjs.useDisclosureScopedContext;

package/cjs/disclosure/disclosure-provider.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _S6UU7NA4cjs = require('../__chunks/S6UU7NA4.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _XRJBC7H7cjs = require('../__chunks/XRJBC7H7.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 
 
-var _JAQJG42Rcjs = require('../__chunks/JAQJG42R.cjs');
+var _QJZAESARcjs = require('../__chunks/QJZAESAR.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -14,8 +14,8 @@ require('../__chunks/AV6KTKLE.cjs');
 // src/disclosure/disclosure-provider.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function DisclosureProvider(props = {}) {
-  const store = _JAQJG42Rcjs.useDisclosureStore.call(void 0, props);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _S6UU7NA4cjs.DisclosureContextProvider, { value: store, children: props.children });
+  const store = _QJZAESARcjs.useDisclosureStore.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XRJBC7H7cjs.DisclosureContextProvider, { value: store, children: props.children });
 }
 
 

package/cjs/disclosure/disclosure-store.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _JAQJG42Rcjs = require('../__chunks/JAQJG42R.cjs');
+var _QJZAESARcjs = require('../__chunks/QJZAESAR.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -10,4 +10,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.useDisclosureStore = _JAQJG42Rcjs.useDisclosureStore; exports.useDisclosureStoreProps = _JAQJG42Rcjs.useDisclosureStoreProps;
+exports.useDisclosureStore = _QJZAESARcjs.useDisclosureStore; exports.useDisclosureStoreProps = _QJZAESARcjs.useDisclosureStoreProps;

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

@@ -1,6 +1,8 @@
 import * as Core from "@ariakit/core/disclosure/disclosure-store";
 import type { Store } from "../utils/store.js";
-export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps): T;
+export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps): T & {
+    disclosure: DisclosureStore | null | undefined;
+};
 /**
  * Creates a disclosure store to control the state of
  * [Disclosure](https://ariakit.org/components/disclosure) components.
@@ -16,7 +18,7 @@ export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(
 export declare function useDisclosureStore(props?: DisclosureStoreProps): DisclosureStore;
 export interface DisclosureStoreState extends Core.DisclosureStoreState {
 }
-export interface DisclosureStoreFunctions extends Core.DisclosureStoreFunctions {
+export interface DisclosureStoreFunctions extends Pick<DisclosureStoreOptions, "disclosure">, Omit<Core.DisclosureStoreFunctions, "disclosure"> {
 }
 export interface DisclosureStoreOptions extends Core.DisclosureStoreOptions {
     /**
@@ -35,8 +37,19 @@ export interface DisclosureStoreOptions extends Core.DisclosureStoreOptions {
      * const disclosure = useDisclosureStore({ setMounted });
      */
     setMounted?: (mounted: DisclosureStoreState["mounted"]) => void;
+    /**
+     * A reference to another disclosure store that controls another disclosure
+     * component to keep them in sync. Element states like `contentElement` and
+     * `disclosureElement` won't be synced. For that, use the
+     * [`store`](https://ariakit.org/reference/disclosure-provider#store) prop
+     * instead.
+     *
+     * Live examples:
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
+     */
+    disclosure?: DisclosureStore | null;
 }
-export interface DisclosureStoreProps extends DisclosureStoreOptions, Core.DisclosureStoreProps {
+export interface DisclosureStoreProps extends DisclosureStoreOptions, Omit<Core.DisclosureStoreProps, "disclosure"> {
 }
-export interface DisclosureStore extends DisclosureStoreFunctions, Store<Core.DisclosureStore> {
+export interface DisclosureStore extends DisclosureStoreFunctions, Omit<Store<Core.DisclosureStore>, "disclosure"> {
 }

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

@@ -1,6 +1,8 @@
 import * as Core from "@ariakit/core/disclosure/disclosure-store";
 import type { Store } from "../utils/store.js";
-export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps): T;
+export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps): T & {
+    disclosure: DisclosureStore | null | undefined;
+};
 /**
  * Creates a disclosure store to control the state of
  * [Disclosure](https://ariakit.org/components/disclosure) components.
@@ -16,7 +18,7 @@ export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(
 export declare function useDisclosureStore(props?: DisclosureStoreProps): DisclosureStore;
 export interface DisclosureStoreState extends Core.DisclosureStoreState {
 }
-export interface DisclosureStoreFunctions extends Core.DisclosureStoreFunctions {
+export interface DisclosureStoreFunctions extends Pick<DisclosureStoreOptions, "disclosure">, Omit<Core.DisclosureStoreFunctions, "disclosure"> {
 }
 export interface DisclosureStoreOptions extends Core.DisclosureStoreOptions {
     /**
@@ -35,8 +37,19 @@ export interface DisclosureStoreOptions extends Core.DisclosureStoreOptions {
      * const disclosure = useDisclosureStore({ setMounted });
      */
     setMounted?: (mounted: DisclosureStoreState["mounted"]) => void;
+    /**
+     * A reference to another disclosure store that controls another disclosure
+     * component to keep them in sync. Element states like `contentElement` and
+     * `disclosureElement` won't be synced. For that, use the
+     * [`store`](https://ariakit.org/reference/disclosure-provider#store) prop
+     * instead.
+     *
+     * Live examples:
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
+     */
+    disclosure?: DisclosureStore | null;
 }
-export interface DisclosureStoreProps extends DisclosureStoreOptions, Core.DisclosureStoreProps {
+export interface DisclosureStoreProps extends DisclosureStoreOptions, Omit<Core.DisclosureStoreProps, "disclosure"> {
 }
-export interface DisclosureStore extends DisclosureStoreFunctions, Store<Core.DisclosureStore> {
+export interface DisclosureStore extends DisclosureStoreFunctions, Omit<Store<Core.DisclosureStore>, "disclosure"> {
 }

package/cjs/disclosure/disclosure.cjs

@@ -2,17 +2,17 @@
 
 
 
-var _LFHNPG2Lcjs = require('../__chunks/LFHNPG2L.cjs');
-require('../__chunks/5UTRYT6E.cjs');
-require('../__chunks/DAJUUBUI.cjs');
-require('../__chunks/S6UU7NA4.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+var _QCQVRINHcjs = require('../__chunks/QCQVRINH.cjs');
+require('../__chunks/M7WN4XJH.cjs');
+require('../__chunks/Z7QK7V4M.cjs');
+require('../__chunks/XRJBC7H7.cjs');
+require('../__chunks/XRZ2L7EA.cjs');
 require('../__chunks/75KXQZJX.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Disclosure = _LFHNPG2Lcjs.Disclosure; exports.useDisclosure = _LFHNPG2Lcjs.useDisclosure;
+exports.Disclosure = _QCQVRINHcjs.Disclosure; exports.useDisclosure = _QCQVRINHcjs.useDisclosure;

package/cjs/disclosure/disclosure.d.cts

@@ -1,8 +1,10 @@
-import type { MouseEvent } from "react";
+import type { ElementType, MouseEvent } from "react";
 import type { BooleanOrCallback } from "@ariakit/core/utils/types";
 import type { ButtonOptions } from "../button/button.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { DisclosureStore } from "./disclosure-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Disclosure` component.
  * @see https://ariakit.org/components/disclosure
@@ -14,7 +16,7 @@ import type { DisclosureStore } from "./disclosure-store.js";
  * <DisclosureContent store={store}>Content</DisclosureContent>
  * ```
  */
-export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureOptions<"button">>;
+export declare const useDisclosure: import("../utils/types.js").Hook<"button", DisclosureOptions<"button">>;
 /**
  * Renders an element that controls the visibility of a
  * [`DisclosureContent`](https://ariakit.org/reference/disclosure-content)
@@ -28,8 +30,8 @@ export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureO
  * </DisclosureProvider>
  * ```
  */
-export declare const Disclosure: import("../utils/types.js").Component<DisclosureOptions<"button">>;
-export interface DisclosureOptions<T extends As = "button"> extends ButtonOptions<T> {
+export declare const Disclosure: (props: DisclosureProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface DisclosureOptions<T extends ElementType = TagName> extends ButtonOptions<T> {
     /**
      * Object returned by the
      * [`useDisclosureStore`](https://ariakit.org/reference/use-disclosure-store)
@@ -50,4 +52,5 @@ export interface DisclosureOptions<T extends As = "button"> extends ButtonOption
      */
     toggleOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
 }
-export type DisclosureProps<T extends As = "button"> = Props<DisclosureOptions<T>>;
+export type DisclosureProps<T extends ElementType = TagName> = Props<T, DisclosureOptions<T>>;
+export {};

package/cjs/disclosure/disclosure.d.ts

@@ -1,8 +1,10 @@
-import type { MouseEvent } from "react";
+import type { ElementType, MouseEvent } from "react";
 import type { BooleanOrCallback } from "@ariakit/core/utils/types";
 import type { ButtonOptions } from "../button/button.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { DisclosureStore } from "./disclosure-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Disclosure` component.
  * @see https://ariakit.org/components/disclosure
@@ -14,7 +16,7 @@ import type { DisclosureStore } from "./disclosure-store.js";
  * <DisclosureContent store={store}>Content</DisclosureContent>
  * ```
  */
-export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureOptions<"button">>;
+export declare const useDisclosure: import("../utils/types.js").Hook<"button", DisclosureOptions<"button">>;
 /**
  * Renders an element that controls the visibility of a
  * [`DisclosureContent`](https://ariakit.org/reference/disclosure-content)
@@ -28,8 +30,8 @@ export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureO
  * </DisclosureProvider>
  * ```
  */
-export declare const Disclosure: import("../utils/types.js").Component<DisclosureOptions<"button">>;
-export interface DisclosureOptions<T extends As = "button"> extends ButtonOptions<T> {
+export declare const Disclosure: (props: DisclosureProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface DisclosureOptions<T extends ElementType = TagName> extends ButtonOptions<T> {
     /**
      * Object returned by the
      * [`useDisclosureStore`](https://ariakit.org/reference/use-disclosure-store)
@@ -50,4 +52,5 @@ export interface DisclosureOptions<T extends As = "button"> extends ButtonOption
      */
     toggleOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
 }
-export type DisclosureProps<T extends As = "button"> = Props<DisclosureOptions<T>>;
+export type DisclosureProps<T extends ElementType = TagName> = Props<T, DisclosureOptions<T>>;
+export {};

package/cjs/focus-trap/focus-trap-region.cjs

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _XB3G2EO2cjs = require('../__chunks/XB3G2EO2.cjs');
-require('../__chunks/R66IWXK6.cjs');
+var _O2WTAUCQcjs = require('../__chunks/O2WTAUCQ.cjs');
+require('../__chunks/HQKST6ZJ.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 
 
 
@@ -22,9 +22,11 @@ var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 // src/focus-trap/focus-trap-region.tsx
 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 useFocusTrapRegion = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
+var TagName = "div";
+var useFocusTrapRegion = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useFocusTrapRegion2(_a) {
     var _b = _a, { enabled = false } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["enabled"]);
     const ref = _react.useRef.call(void 0, null);
     props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
@@ -34,7 +36,7 @@ var useFocusTrapRegion = _RNZNGEL4cjs.createHook.call(void 0,
           if (!enabled)
             return null;
           return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _XB3G2EO2cjs.FocusTrap,
+            _O2WTAUCQcjs.FocusTrap,
             {
               onFocus: (event) => {
                 const container = ref.current;
@@ -67,18 +69,13 @@ var useFocusTrapRegion = _RNZNGEL4cjs.createHook.call(void 0,
     props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
       ref: _EO6LS72Hcjs.useMergeRefs.call(void 0, ref, props.ref)
     });
-    return props;
+    return _misc.removeUndefinedValues.call(void 0, props);
   }
 );
-var FocusTrapRegion = _RNZNGEL4cjs.createComponent.call(void 0, 
-  (props) => {
-    const htmlProps = useFocusTrapRegion(props);
-    return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  FocusTrapRegion.displayName = "FocusTrapRegion";
-}
+var FocusTrapRegion = _Q67LZMDTcjs.forwardRef.call(void 0, function FocusTrapRegion2(props) {
+  const htmlProps = useFocusTrapRegion(props);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+});
 
 
 

package/cjs/focus-trap/focus-trap-region.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 = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FocusTrapRegion` component.
  * @see https://ariakit.org/components/focus-trap-region
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props} />
  * ```
  */
-export declare const useFocusTrapRegion: import("../utils/types.js").Hook<FocusTrapRegionOptions<"div">>;
+export declare const useFocusTrapRegion: import("../utils/types.js").Hook<"div", FocusTrapRegionOptions<"div">>;
 /**
  * Renders a wrapper element that traps the focus inside it when the
  * [`enabled`](https://ariakit.org/reference/focus-trap-region#enabled) prop is
@@ -23,12 +26,13 @@ export declare const useFocusTrapRegion: import("../utils/types.js").Hook<FocusT
  * </FocusTrapRegion>
  * ```
  */
-export declare const FocusTrapRegion: import("../utils/types.js").Component<FocusTrapRegionOptions<"div">>;
-export interface FocusTrapRegionOptions<T extends As = "div"> extends Options<T> {
+export declare const FocusTrapRegion: (props: FocusTrapRegionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FocusTrapRegionOptions<_T extends ElementType = TagName> extends Options {
     /**
      * If true, it will trap the focus in the region.
      * @default false
      */
     enabled?: boolean;
 }
-export type FocusTrapRegionProps<T extends As = "div"> = Props<FocusTrapRegionOptions<T>>;
+export type FocusTrapRegionProps<T extends ElementType = TagName> = Props<T, FocusTrapRegionOptions<T>>;
+export {};

package/cjs/focus-trap/focus-trap-region.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 = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FocusTrapRegion` component.
  * @see https://ariakit.org/components/focus-trap-region
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props} />
  * ```
  */
-export declare const useFocusTrapRegion: import("../utils/types.js").Hook<FocusTrapRegionOptions<"div">>;
+export declare const useFocusTrapRegion: import("../utils/types.js").Hook<"div", FocusTrapRegionOptions<"div">>;
 /**
  * Renders a wrapper element that traps the focus inside it when the
  * [`enabled`](https://ariakit.org/reference/focus-trap-region#enabled) prop is
@@ -23,12 +26,13 @@ export declare const useFocusTrapRegion: import("../utils/types.js").Hook<FocusT
  * </FocusTrapRegion>
  * ```
  */
-export declare const FocusTrapRegion: import("../utils/types.js").Component<FocusTrapRegionOptions<"div">>;
-export interface FocusTrapRegionOptions<T extends As = "div"> extends Options<T> {
+export declare const FocusTrapRegion: (props: FocusTrapRegionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FocusTrapRegionOptions<_T extends ElementType = TagName> extends Options {
     /**
      * If true, it will trap the focus in the region.
      * @default false
      */
     enabled?: boolean;
 }
-export type FocusTrapRegionProps<T extends As = "div"> = Props<FocusTrapRegionOptions<T>>;
+export type FocusTrapRegionProps<T extends ElementType = TagName> = Props<T, FocusTrapRegionOptions<T>>;
+export {};

package/cjs/focus-trap/focus-trap.cjs

@@ -2,13 +2,13 @@
 
 
 
-var _XB3G2EO2cjs = require('../__chunks/XB3G2EO2.cjs');
-require('../__chunks/R66IWXK6.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _O2WTAUCQcjs = require('../__chunks/O2WTAUCQ.cjs');
+require('../__chunks/HQKST6ZJ.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.FocusTrap = _XB3G2EO2cjs.FocusTrap; exports.useFocusTrap = _XB3G2EO2cjs.useFocusTrap;
+exports.FocusTrap = _O2WTAUCQcjs.FocusTrap; exports.useFocusTrap = _O2WTAUCQcjs.useFocusTrap;

package/cjs/focus-trap/focus-trap.d.cts

@@ -1,5 +1,8 @@
-import type { As, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Props } from "../utils/types.js";
 import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FocusTrap` component.
  * @see https://ariakit.org/components/focus-trap
@@ -9,7 +12,7 @@ import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.j
  * <Role {...props} />
  * ```
  */
-export declare const useFocusTrap: import("../utils/types.js").Hook<FocusTrapOptions<"span">>;
+export declare const useFocusTrap: import("../utils/types.js").Hook<"span", FocusTrapOptions<"span">>;
 /**
  * Renders a focus trap element.
  * @see https://ariakit.org/components/focus-trap
@@ -18,6 +21,7 @@ export declare const useFocusTrap: import("../utils/types.js").Hook<FocusTrapOpt
  * <FocusTrap onFocus={focusSomethingElse} />
  * ```
  */
-export declare const FocusTrap: import("../utils/types.js").Component<FocusTrapOptions<"span">>;
-export type FocusTrapOptions<T extends As = "span"> = VisuallyHiddenOptions<T>;
-export type FocusTrapProps<T extends As = "span"> = Props<FocusTrapOptions<T>>;
+export declare const FocusTrap: (props: FocusTrapProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export type FocusTrapOptions<T extends ElementType = TagName> = VisuallyHiddenOptions<T>;
+export type FocusTrapProps<T extends ElementType = TagName> = Props<T, FocusTrapOptions<T>>;
+export {};

package/cjs/focus-trap/focus-trap.d.ts

@@ -1,5 +1,8 @@
-import type { As, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Props } from "../utils/types.js";
 import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FocusTrap` component.
  * @see https://ariakit.org/components/focus-trap
@@ -9,7 +12,7 @@ import type { VisuallyHiddenOptions } from "../visually-hidden/visually-hidden.j
  * <Role {...props} />
  * ```
  */
-export declare const useFocusTrap: import("../utils/types.js").Hook<FocusTrapOptions<"span">>;
+export declare const useFocusTrap: import("../utils/types.js").Hook<"span", FocusTrapOptions<"span">>;
 /**
  * Renders a focus trap element.
  * @see https://ariakit.org/components/focus-trap
@@ -18,6 +21,7 @@ export declare const useFocusTrap: import("../utils/types.js").Hook<FocusTrapOpt
  * <FocusTrap onFocus={focusSomethingElse} />
  * ```
  */
-export declare const FocusTrap: import("../utils/types.js").Component<FocusTrapOptions<"span">>;
-export type FocusTrapOptions<T extends As = "span"> = VisuallyHiddenOptions<T>;
-export type FocusTrapProps<T extends As = "span"> = Props<FocusTrapOptions<T>>;
+export declare const FocusTrap: (props: FocusTrapProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export type FocusTrapOptions<T extends ElementType = TagName> = VisuallyHiddenOptions<T>;
+export type FocusTrapProps<T extends ElementType = TagName> = Props<T, FocusTrapOptions<T>>;
+export {};

package/cjs/focusable/focusable-container.cjs

@@ -2,13 +2,13 @@
 
 
 
-var _7566TIRWcjs = require('../__chunks/7566TIRW.cjs');
+var _5SRODZ4Bcjs = require('../__chunks/5SRODZ4B.cjs');
 require('../__chunks/75KXQZJX.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.FocusableContainer = _7566TIRWcjs.FocusableContainer; exports.useFocusableContainer = _7566TIRWcjs.useFocusableContainer;
+exports.FocusableContainer = _5SRODZ4Bcjs.FocusableContainer; exports.useFocusableContainer = _5SRODZ4Bcjs.useFocusableContainer;

package/cjs/focusable/focusable-container.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 = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FocusableContainer` component.
  * @see https://ariakit.org/components/focusable
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props} />
  * ```
  */
-export declare const useFocusableContainer: import("../utils/types.js").Hook<FocusableContainerOptions<"div">>;
+export declare const useFocusableContainer: import("../utils/types.js").Hook<"div", FocusableContainerOptions<"div">>;
 /**
  * Renders a div that wraps
  * [`Focusable`](https://ariakit.org/reference/focusable) components and
@@ -21,8 +24,8 @@ export declare const useFocusableContainer: import("../utils/types.js").Hook<Foc
  * </FocusableContainer>
  * ```
  */
-export declare const FocusableContainer: import("../utils/types.js").Component<FocusableContainerOptions<"div">>;
-export type FocusableContainerOptions<T extends As = "div"> = Options<T> & {
+export declare const FocusableContainer: (props: FocusableContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FocusableContainerOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Determines whether [`Focusable`](https://ariakit.org/reference/focusable)
      * elements inside the container should be automatically focused when the
@@ -31,5 +34,6 @@ export type FocusableContainerOptions<T extends As = "div"> = Options<T> & {
      * @default true
      */
     autoFocusOnShow?: boolean;
-};
-export type FocusableContainerProps<T extends As = "div"> = Props<FocusableContainerOptions<T>>;
+}
+export type FocusableContainerProps<T extends ElementType = TagName> = Props<T, FocusableContainerOptions<T>>;
+export {};

package/cjs/focusable/focusable-container.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 = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `FocusableContainer` component.
  * @see https://ariakit.org/components/focusable
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props} />
  * ```
  */
-export declare const useFocusableContainer: import("../utils/types.js").Hook<FocusableContainerOptions<"div">>;
+export declare const useFocusableContainer: import("../utils/types.js").Hook<"div", FocusableContainerOptions<"div">>;
 /**
  * Renders a div that wraps
  * [`Focusable`](https://ariakit.org/reference/focusable) components and
@@ -21,8 +24,8 @@ export declare const useFocusableContainer: import("../utils/types.js").Hook<Foc
  * </FocusableContainer>
  * ```
  */
-export declare const FocusableContainer: import("../utils/types.js").Component<FocusableContainerOptions<"div">>;
-export type FocusableContainerOptions<T extends As = "div"> = Options<T> & {
+export declare const FocusableContainer: (props: FocusableContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface FocusableContainerOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Determines whether [`Focusable`](https://ariakit.org/reference/focusable)
      * elements inside the container should be automatically focused when the
@@ -31,5 +34,6 @@ export type FocusableContainerOptions<T extends As = "div"> = Options<T> & {
      * @default true
      */
     autoFocusOnShow?: boolean;
-};
-export type FocusableContainerProps<T extends As = "div"> = Props<FocusableContainerOptions<T>>;
+}
+export type FocusableContainerProps<T extends ElementType = TagName> = Props<T, FocusableContainerOptions<T>>;
+export {};

package/cjs/focusable/focusable.cjs

@@ -2,13 +2,13 @@
 
 
 
-var _Z3GCTNW4cjs = require('../__chunks/Z3GCTNW4.cjs');
+var _XRZ2L7EAcjs = require('../__chunks/XRZ2L7EA.cjs');
 require('../__chunks/75KXQZJX.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Focusable = _Z3GCTNW4cjs.Focusable; exports.useFocusable = _Z3GCTNW4cjs.useFocusable;
+exports.Focusable = _XRZ2L7EAcjs.Focusable; exports.useFocusable = _XRZ2L7EAcjs.useFocusable;