@ariakit/react-core 0.3.14 → 0.4.0

package/esm/form/form.js

@@ -2,13 +2,13 @@
 import {
   FormScopedContextProvider,
   useFormContext
-} from "../__chunks/V4ZFXDFK.js";
-import "../__chunks/4UUKJZ4V.js";
+} from "../__chunks/GEIG6TES.js";
+import "../__chunks/MADQZZRL.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import {
   useEvent,
   useInitialValue,
@@ -29,6 +29,7 @@ import { useEffect, useRef, useState } from "react";
 import { isTextField } from "@ariakit/core/utils/dom";
 import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "form";
 function isField(element, items) {
   return items.some(
     (item) => item.type === "field" && item.element === element
@@ -42,126 +43,121 @@ function getFirstInvalidField(items) {
     }
   );
 }
-var useForm = createHook(
-  (_a) => {
-    var _b = _a, {
-      store,
-      validateOnChange = true,
-      validateOnBlur = true,
-      resetOnUnmount = false,
-      resetOnSubmit = true,
-      autoFocusOnSubmit = true
-    } = _b, props = __objRest(_b, [
-      "store",
-      "validateOnChange",
-      "validateOnBlur",
-      "resetOnUnmount",
-      "resetOnSubmit",
-      "autoFocusOnSubmit"
-    ]);
-    const context = useFormContext();
-    store = store || context;
-    invariant(
-      store,
-      process.env.NODE_ENV !== "production" && "Form must receive a `store` prop or be wrapped in a FormProvider component."
-    );
-    const ref = useRef(null);
-    const values = store.useState("values");
-    const submitSucceed = store.useState("submitSucceed");
-    const submitFailed = store.useState("submitFailed");
-    const items = store.useState("items");
-    const defaultValues = useInitialValue(values);
-    useEffect(
-      () => resetOnUnmount ? store == null ? void 0 : store.reset : void 0,
-      [resetOnUnmount, store]
-    );
-    useUpdateEffect(() => {
-      if (!validateOnChange)
-        return;
-      if (values === defaultValues)
-        return;
-      store == null ? void 0 : store.validate();
-    }, [validateOnChange, values, defaultValues, store]);
-    useEffect(() => {
-      if (!resetOnSubmit)
-        return;
-      if (!submitSucceed)
-        return;
-      store == null ? void 0 : store.reset();
-    }, [resetOnSubmit, submitSucceed, store]);
-    const [shouldFocusOnSubmit, setShouldFocusOnSubmit] = useState(false);
-    useEffect(() => {
-      if (!shouldFocusOnSubmit)
-        return;
-      if (!submitFailed)
-        return;
-      const field = getFirstInvalidField(items);
-      const element = field == null ? void 0 : field.element;
-      if (!element)
-        return;
-      setShouldFocusOnSubmit(false);
-      element.focus();
-      if (isTextField(element)) {
-        element.select();
-      }
-    }, [autoFocusOnSubmit, submitFailed, items]);
-    const onSubmitProp = props.onSubmit;
-    const onSubmit = useEvent((event) => {
-      onSubmitProp == null ? void 0 : onSubmitProp(event);
-      if (event.defaultPrevented)
-        return;
-      event.preventDefault();
-      store == null ? void 0 : store.submit();
-      if (!autoFocusOnSubmit)
-        return;
-      setShouldFocusOnSubmit(true);
-    });
-    const onBlurProp = props.onBlur;
-    const onBlur = useEvent((event) => {
-      onBlurProp == null ? void 0 : onBlurProp(event);
-      if (event.defaultPrevented)
-        return;
-      if (!validateOnBlur)
-        return;
-      if (!store)
-        return;
-      if (!isField(event.target, store.getState().items))
-        return;
-      store.validate();
-    });
-    const onResetProp = props.onReset;
-    const onReset = useEvent((event) => {
-      onResetProp == null ? void 0 : onResetProp(event);
-      if (event.defaultPrevented)
-        return;
-      event.preventDefault();
-      store == null ? void 0 : store.reset();
-    });
-    props = useWrapElement(
-      props,
-      (element) => /* @__PURE__ */ jsx(FormScopedContextProvider, { value: store, children: element }),
-      [store]
-    );
-    const tagName = useTagName(ref, props.as || "form");
-    props = __spreadProps(__spreadValues({
-      role: tagName !== "form" ? "form" : void 0,
-      noValidate: true
-    }, props), {
-      ref: useMergeRefs(ref, props.ref),
-      onSubmit,
-      onBlur,
-      onReset
-    });
-    return props;
-  }
-);
-var Form = createComponent((props) => {
+var useForm = createHook(function useForm2(_a) {
+  var _b = _a, {
+    store,
+    validateOnChange = true,
+    validateOnBlur = true,
+    resetOnUnmount = false,
+    resetOnSubmit = true,
+    autoFocusOnSubmit = true
+  } = _b, props = __objRest(_b, [
+    "store",
+    "validateOnChange",
+    "validateOnBlur",
+    "resetOnUnmount",
+    "resetOnSubmit",
+    "autoFocusOnSubmit"
+  ]);
+  const context = useFormContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "Form must receive a `store` prop or be wrapped in a FormProvider component."
+  );
+  const ref = useRef(null);
+  const values = store.useState("values");
+  const submitSucceed = store.useState("submitSucceed");
+  const submitFailed = store.useState("submitFailed");
+  const items = store.useState("items");
+  const defaultValues = useInitialValue(values);
+  useEffect(
+    () => resetOnUnmount ? store == null ? void 0 : store.reset : void 0,
+    [resetOnUnmount, store]
+  );
+  useUpdateEffect(() => {
+    if (!validateOnChange)
+      return;
+    if (values === defaultValues)
+      return;
+    store == null ? void 0 : store.validate();
+  }, [validateOnChange, values, defaultValues, store]);
+  useEffect(() => {
+    if (!resetOnSubmit)
+      return;
+    if (!submitSucceed)
+      return;
+    store == null ? void 0 : store.reset();
+  }, [resetOnSubmit, submitSucceed, store]);
+  const [shouldFocusOnSubmit, setShouldFocusOnSubmit] = useState(false);
+  useEffect(() => {
+    if (!shouldFocusOnSubmit)
+      return;
+    if (!submitFailed)
+      return;
+    const field = getFirstInvalidField(items);
+    const element = field == null ? void 0 : field.element;
+    if (!element)
+      return;
+    setShouldFocusOnSubmit(false);
+    element.focus();
+    if (isTextField(element)) {
+      element.select();
+    }
+  }, [autoFocusOnSubmit, submitFailed, items]);
+  const onSubmitProp = props.onSubmit;
+  const onSubmit = useEvent((event) => {
+    onSubmitProp == null ? void 0 : onSubmitProp(event);
+    if (event.defaultPrevented)
+      return;
+    event.preventDefault();
+    store == null ? void 0 : store.submit();
+    if (!autoFocusOnSubmit)
+      return;
+    setShouldFocusOnSubmit(true);
+  });
+  const onBlurProp = props.onBlur;
+  const onBlur = useEvent((event) => {
+    onBlurProp == null ? void 0 : onBlurProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (!validateOnBlur)
+      return;
+    if (!store)
+      return;
+    if (!isField(event.target, store.getState().items))
+      return;
+    store.validate();
+  });
+  const onResetProp = props.onReset;
+  const onReset = useEvent((event) => {
+    onResetProp == null ? void 0 : onResetProp(event);
+    if (event.defaultPrevented)
+      return;
+    event.preventDefault();
+    store == null ? void 0 : store.reset();
+  });
+  props = useWrapElement(
+    props,
+    (element) => /* @__PURE__ */ jsx(FormScopedContextProvider, { value: store, children: element }),
+    [store]
+  );
+  const tagName = useTagName(ref, TagName);
+  props = __spreadProps(__spreadValues({
+    role: tagName !== "form" ? "form" : void 0,
+    noValidate: true
+  }, props), {
+    ref: useMergeRefs(ref, props.ref),
+    onSubmit,
+    onBlur,
+    onReset
+  });
+  return props;
+});
+var Form = forwardRef(function Form2(props) {
   const htmlProps = useForm(props);
-  return createElement("form", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Form.displayName = "Form";
-}
 export {
   Form,
   useForm

package/esm/group/group-label.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 `GroupLabel` component. This hook must be used in a
  * component that's wrapped with `Group` so the `aria-labelledby` prop is
@@ -11,7 +14,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props}>Label</Role>
  * ```
  */
-export declare const useGroupLabel: import("../utils/types.js").Hook<GroupLabelOptions<"div">>;
+export declare const useGroupLabel: import("../utils/types.js").Hook<"div", GroupLabelOptions<"div">>;
 /**
  * Renders a label in a group. This component should be wrapped with a
  * [`Group`](https://ariakit.org/reference/group) so the `aria-labelledby`
@@ -24,6 +27,8 @@ export declare const useGroupLabel: import("../utils/types.js").Hook<GroupLabelO
  * </Group>
  * ```
  */
-export declare const GroupLabel: import("../utils/types.js").Component<GroupLabelOptions<"div">>;
-export type GroupLabelOptions<T extends As = "div"> = Options<T>;
-export type GroupLabelProps<T extends As = "div"> = Props<GroupLabelOptions<T>>;
+export declare const GroupLabel: (props: GroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface GroupLabelOptions<_T extends ElementType = TagName> extends Options {
+}
+export type GroupLabelProps<T extends ElementType = TagName> = Props<T, GroupLabelOptions<T>>;
+export {};

package/esm/group/group-label.js

@@ -2,9 +2,9 @@
 import {
   GroupLabel,
   useGroupLabel
-} from "../__chunks/NT7GEZQU.js";
+} from "../__chunks/TH2YTBRW.js";
 import "../__chunks/3X3MDQGM.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/group/group.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 `Group` component.
  * @see https://ariakit.org/components/group
@@ -8,7 +11,7 @@ import type { As, Options, Props } from "../utils/types.js";
  * <Role {...props}>Group</Role>
  * ```
  */
-export declare const useGroup: import("../utils/types.js").Hook<GroupOptions<"div">>;
+export declare const useGroup: import("../utils/types.js").Hook<"div", Options>;
 /**
  * Renders a group element. Optionally, a
  * [`GroupLabel`](https://ariakit.org/reference/group-label) can be rendered as
@@ -19,6 +22,7 @@ export declare const useGroup: import("../utils/types.js").Hook<GroupOptions<"di
  * <Group>Group</Group>
  * ```
  */
-export declare const Group: import("../utils/types.js").Component<GroupOptions<"div">>;
-export type GroupOptions<T extends As = "div"> = Options<T>;
-export type GroupProps<T extends As = "div"> = Props<GroupOptions<T>>;
+export declare const Group: (props: GroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export type GroupOptions<_T extends ElementType = TagName> = Options;
+export type GroupProps<T extends ElementType = TagName> = Props<T, GroupOptions<T>>;
+export {};

package/esm/group/group.js

@@ -2,9 +2,9 @@
 import {
   Group,
   useGroup
-} from "../__chunks/R2QZ3KXH.js";
+} from "../__chunks/CWDOOAGR.js";
 import "../__chunks/3X3MDQGM.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/heading/heading-level.d.ts

@@ -17,11 +17,11 @@ import type { HeadingLevels } from "./utils.js";
  * ```
  */
 export declare function HeadingLevel({ level, children }: HeadingLevelProps): import("react/jsx-runtime").JSX.Element;
-export type HeadingLevelProps = {
+export interface HeadingLevelProps {
     /**
      * The heading level. By default, it'll increase the level by 1 based on the
      * context.
      */
     level?: HeadingLevels;
     children?: ReactNode;
-};
+}

package/esm/heading/heading.d.ts

@@ -1,6 +1,9 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
 import type { HeadingLevels } from "./utils.js";
 type HeadingElements = `h${HeadingLevels}`;
+declare const TagName = "h1";
+type TagName = HeadingElements;
 /**
  * Returns props to create a `Heading` component. The element type (or the
  * `aria-level` prop, if the element type is not a native heading) is determined
@@ -12,7 +15,7 @@ type HeadingElements = `h${HeadingLevels}`;
  * <Role {...props}>Heading</Role>
  * ```
  */
-export declare const useHeading: import("../utils/types.js").Hook<HeadingOptions<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">>;
+export declare const useHeading: import("../utils/types.js").Hook<"h1" | "h2" | "h3" | "h4" | "h5" | "h6", HeadingOptions<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">>;
 /**
  * Renders a heading element. The element type (or the `aria-level` attribute,
  * if the element type is not a native heading) is determined by the context
@@ -29,7 +32,8 @@ export declare const useHeading: import("../utils/types.js").Hook<HeadingOptions
  * </HeadingLevel>
  * ```
  */
-export declare const Heading: import("../utils/types.js").Component<HeadingOptions<"h1" | "h2" | "h3" | "h4" | "h5" | "h6">>;
-export type HeadingOptions<T extends As = HeadingElements> = Options<T>;
-export type HeadingProps<T extends As = HeadingElements> = Props<HeadingOptions<T>>;
+export declare const Heading: (props: HeadingProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface HeadingOptions<_T extends ElementType = TagName> extends Options {
+}
+export type HeadingProps<T extends ElementType = TagName> = Props<T, HeadingOptions<T>>;
 export {};

package/esm/heading/heading.js

@@ -2,9 +2,9 @@
 import {
   Heading,
   useHeading
-} from "../__chunks/P4FX6ZFL.js";
+} from "../__chunks/7HFLDZTS.js";
 import "../__chunks/XPF5GU3Q.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/hovercard/hovercard-anchor.d.ts

@@ -1,8 +1,10 @@
-import type { MouseEvent as ReactMouseEvent } from "react";
+import type { ElementType, MouseEvent as ReactMouseEvent } from "react";
 import type { BooleanOrCallback } from "@ariakit/core/utils/types";
 import type { FocusableOptions } from "../focusable/focusable.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { HovercardStore } from "./hovercard-store.js";
+declare const TagName = "a";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `HovercardAnchor` component.
  * @see https://ariakit.org/components/hovercard
@@ -14,7 +16,7 @@ import type { HovercardStore } from "./hovercard-store.js";
  * <Hovercard store={store}>Details</Hovercard>
  * ```
  */
-export declare const useHovercardAnchor: import("../utils/types.js").Hook<HovercardAnchorOptions<"a">>;
+export declare const useHovercardAnchor: import("../utils/types.js").Hook<"a", HovercardAnchorOptions<"a">>;
 /**
  * Renders an anchor element that will open a
  * [`Hovercard`](https://ariakit.org/reference/hovercard) popup on hover.
@@ -27,8 +29,8 @@ export declare const useHovercardAnchor: import("../utils/types.js").Hook<Hoverc
  * </HovercardProvider>
  * ```
  */
-export declare const HovercardAnchor: import("../utils/types.js").Component<HovercardAnchorOptions<"a">>;
-export interface HovercardAnchorOptions<T extends As = "a"> extends FocusableOptions<T> {
+export declare const HovercardAnchor: (props: HovercardAnchorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface HovercardAnchorOptions<T extends ElementType = TagName> extends FocusableOptions<T> {
     /**
      * Object returned by the
      * [`useHovercardStore`](https://ariakit.org/reference/use-hovercard-store)
@@ -49,4 +51,5 @@ export interface HovercardAnchorOptions<T extends As = "a"> extends FocusableOpt
      */
     showOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
 }
-export type HovercardAnchorProps<T extends As = "a"> = Props<HovercardAnchorOptions<T>>;
+export type HovercardAnchorProps<T extends ElementType = TagName> = Props<T, HovercardAnchorOptions<T>>;
+export {};

package/esm/hovercard/hovercard-anchor.js

@@ -2,14 +2,14 @@
 import {
   HovercardAnchor,
   useHovercardAnchor
-} from "../__chunks/7X4DYKYU.js";
-import "../__chunks/TI7CMBHW.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
-import "../__chunks/KK7H3W2B.js";
+} from "../__chunks/NIWODFOI.js";
+import "../__chunks/TWDHCE7Y.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/VA234QKF.js";
 import "../__chunks/SHA3WOPI.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/hovercard/hovercard-arrow.d.ts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { PopoverArrowOptions } from "../popover/popover-arrow.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { HovercardStore } from "./hovercard-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `HovercardArrow` component.
  * @see https://ariakit.org/components/hovercard
@@ -14,7 +17,7 @@ import type { HovercardStore } from "./hovercard-store.js";
  * </Hovercard>
  * ```
  */
-export declare const useHovercardArrow: import("../utils/types.js").Hook<HovercardArrowOptions<"div">>;
+export declare const useHovercardArrow: import("../utils/types.js").Hook<"div", HovercardArrowOptions<"div">>;
 /**
  * Renders an arrow element inside a
  * [`Hovercard`](https://ariakit.org/reference/hovercard) component that points
@@ -31,8 +34,8 @@ export declare const useHovercardArrow: import("../utils/types.js").Hook<Hoverca
  * </HovercardProvider>
  * ```
  */
-export declare const HovercardArrow: import("../utils/types.js").Component<HovercardArrowOptions<"div">>;
-export interface HovercardArrowOptions<T extends As = "div"> extends PopoverArrowOptions<T> {
+export declare const HovercardArrow: (props: HovercardArrowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface HovercardArrowOptions<T extends ElementType = TagName> extends PopoverArrowOptions<T> {
     /**
      * Object returned by the
      * [`useHovercardStore`](https://ariakit.org/reference/use-hovercard-store)
@@ -43,4 +46,5 @@ export interface HovercardArrowOptions<T extends As = "div"> extends PopoverArro
      */
     store?: HovercardStore;
 }
-export type HovercardArrowProps<T extends As = "div"> = Props<HovercardArrowOptions<T>>;
+export type HovercardArrowProps<T extends ElementType = TagName> = Props<T, HovercardArrowOptions<T>>;
+export {};

package/esm/hovercard/hovercard-arrow.js

@@ -1,19 +1,19 @@
 "use client";
 import {
   usePopoverArrow
-} from "../__chunks/ULAW5PPH.js";
+} from "../__chunks/UFM3D5TN.js";
 import "../__chunks/QFL5V2DO.js";
 import {
   useHovercardContext
-} from "../__chunks/TI7CMBHW.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+} from "../__chunks/TWDHCE7Y.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import {
@@ -22,8 +22,9 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/hovercard/hovercard-arrow.ts
+var TagName = "div";
 var useHovercardArrow = createHook(
-  (_a) => {
+  function useHovercardArrow2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useHovercardContext();
     store = store || context;
@@ -31,15 +32,10 @@ var useHovercardArrow = createHook(
     return props;
   }
 );
-var HovercardArrow = createComponent(
-  (props) => {
-    const htmlProps = useHovercardArrow(props);
-    return createElement("div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  HovercardArrow.displayName = "HovercardArrow";
-}
+var HovercardArrow = forwardRef(function HovercardArrow2(props) {
+  const htmlProps = useHovercardArrow(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   HovercardArrow,
   useHovercardArrow

package/esm/hovercard/hovercard-context.js

@@ -5,11 +5,11 @@ import {
   useHovercardContext,
   useHovercardProviderContext,
   useHovercardScopedContext
-} from "../__chunks/TI7CMBHW.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/TWDHCE7Y.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/hovercard/hovercard-description.d.ts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { PopoverDescriptionOptions } from "../popover/popover-description.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { HovercardStore } from "./hovercard-store.js";
+declare const TagName = "p";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `HovercardDescription` component. This hook must be
  * used in a component that's wrapped with `Hovercard` so the `aria-describedby`
@@ -13,7 +16,7 @@ import type { HovercardStore } from "./hovercard-store.js";
  * <Role {...props}>Description</Role>
  * ```
  */
-export declare const useHovercardDescription: import("../utils/types.js").Hook<HovercardDescriptionOptions<"p">>;
+export declare const useHovercardDescription: import("../utils/types.js").Hook<"p", HovercardDescriptionOptions<"p">>;
 /**
  * Renders a description in a hovercard. This component must be wrapped within
  * [`Hovercard`](https://ariakit.org/reference/hovercard) so the
@@ -28,8 +31,8 @@ export declare const useHovercardDescription: import("../utils/types.js").Hook<H
  * </HovercardProvider>
  * ```
  */
-export declare const HovercardDescription: import("../utils/types.js").Component<HovercardDescriptionOptions<"p">>;
-export interface HovercardDescriptionOptions<T extends As = "p"> extends PopoverDescriptionOptions<T> {
+export declare const HovercardDescription: (props: HovercardDescriptionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface HovercardDescriptionOptions<T extends ElementType = TagName> extends PopoverDescriptionOptions<T> {
     /**
      * Object returned by the
      * [`useHovercardStore`](https://ariakit.org/reference/use-hovercard-store)
@@ -40,4 +43,5 @@ export interface HovercardDescriptionOptions<T extends As = "p"> extends Popover
      */
     store?: HovercardStore;
 }
-export type HovercardDescriptionProps<T extends As = "p"> = Props<HovercardDescriptionOptions<T>>;
+export type HovercardDescriptionProps<T extends ElementType = TagName> = Props<T, HovercardDescriptionOptions<T>>;
+export {};