@ariakit/react-components 0.1.1 → 0.1.2

package/dist/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import {\n  useBooleanEvent,\n  useEvent,\n  useId,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant, isApple } from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, KeyboardEvent } from \"react\";\nimport { useCallback, useState } from \"react\";\nimport type { CompositeItemOptions } from \"../composite/composite-item.tsx\";\nimport { useCompositeItem } from \"../composite/composite-item.tsx\";\nimport {\n  TagRemoveIdContext,\n  TagValueContext,\n  useTagContext,\n} from \"./tag-context.tsx\";\nimport type { TagStore } from \"./tag-store.ts\";\nimport { useTouchDevice } from \"./utils.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `Tag` component.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx\n * const props = useTag();\n * <Role.div {...props} />\n * ```\n */\nexport const useTag = createHook<TagName, TagOptions>(function useTag({\n  store,\n  value,\n  getItem: getItemProp,\n  removeOnKeyPress = true,\n  ...props\n}) {\n  const context = useTagContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"Tag must be wrapped in a TagList component.\",\n  );\n\n  const id = useId(props.id);\n  const touchDevice = useTouchDevice();\n\n  const getItem = useCallback<NonNullable<CompositeItemOptions[\"getItem\"]>>(\n    (item) => {\n      const nextItem = { ...item, value };\n      if (getItemProp) {\n        return getItemProp(nextItem);\n      }\n      return nextItem;\n    },\n    [value, getItemProp],\n  );\n\n  const onKeyDownProp = props.onKeyDown;\n  const removeOnKeyPressProp = useBooleanEvent(removeOnKeyPress);\n\n  const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n    onKeyDownProp?.(event);\n    if (event.defaultPrevented) return;\n    const { inputElement } = store.getState();\n\n    const isBackspace = event.key === \"Backspace\";\n    const isRemoveKey = isBackspace || event.key === \"Delete\";\n\n    if (isRemoveKey && removeOnKeyPressProp(event)) {\n      event.preventDefault();\n      store.removeValue(value);\n      const nextId = isBackspace\n        ? store.previous() || store.next()\n        : store.next();\n      store.move(nextId);\n    }\n\n    const isPrintableKey =\n      !event.ctrlKey && !event.metaKey && event.key.length === 1;\n\n    // If it's cmd/ctrl+v, focus on the input element so the value is pasted\n    // there.\n    const pc = !isApple();\n    const v = event.key === \"v\" || event.key === \"V\";\n    const mod = pc ? event.ctrlKey : event.metaKey;\n    const isPaste = mod && v;\n\n    if (isPrintableKey || isPaste) {\n      inputElement?.focus();\n    }\n  });\n\n  const [removeId, setRemoveId] = useState<string>();\n\n  props = useWrapElement(\n    props,\n    (element) => (\n      <TagValueContext.Provider value={value}>\n        <TagRemoveIdContext.Provider value={setRemoveId}>\n          {element}\n        </TagRemoveIdContext.Provider>\n      </TagValueContext.Provider>\n    ),\n    [value],\n  );\n\n  props = {\n    role: !touchDevice ? \"option\" : \"listitem\",\n    children: value,\n    \"aria-describedby\": removeId,\n    ...props,\n    id,\n    onKeyDown,\n  };\n\n  props = useCompositeItem<TagName>({\n    store,\n    ...props,\n    getItem,\n  });\n\n  return props;\n});\n\n/**\n * Renders a tag element inside a\n * [`TagList`](https://ariakit.com/reference/tag-list) wrapper.\n *\n * The user can remove the tag by pressing `Backspace` or `Delete` keys when the\n * tag is focused. The\n * [`removeOnKeyPress`](https://ariakit.com/reference/tag#removeonkeypress) prop\n * can be used to disable this behavior.\n *\n * When a printable key is pressed, the focus is automatically moved to the\n * input element.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx {7-10}\n * <TagProvider>\n *   <TagListLabel>Invitees</TagListLabel>\n *   <TagList>\n *     <TagValues>\n *       {(values) =>\n *         values.map((value) => (\n *           <Tag key={value} value={value}>\n *             {value}\n *             <TagRemove />\n *           </Tag>\n *         ))\n *       }\n *     </TagValues>\n *     <TagInput />\n *   </TagList>\n * </TagProvider>\n * ```\n */\nexport const Tag = memo(\n  forwardRef(function Tag(props: TagProps) {\n    const htmlProps = useTag(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface TagOptions<\n  T extends ElementType = TagName,\n> extends CompositeItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTagStore`](https://ariakit.com/reference/use-tag-store) hook. If not\n   * provided, the closest [`TagList`](https://ariakit.com/reference/tag-list)\n   * component's context will be used.\n   */\n  store?: TagStore;\n  /**\n   * The unique value of the tag. This is automatically rendered as the tag's\n   * content if no children are provided.\n   */\n  value: string;\n  /**\n   * Defines the behavior of the `Backspace` and `Delete` keys when the tag is\n   * focused. If `true`, the tag is removed. If it's a function, it's invoked\n   * with the key event and should return a boolean.\n   * @default true\n   */\n  removeOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLType>>;\n}\n\nexport type TagProps<T extends ElementType = TagName> = Props<T, TagOptions<T>>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;MA6CE,SAAM,WAAU,SAAc,OAAA,EAAA,OAAA,OAAA,SAAA,aAAA,mBAAA,MAAA,GAAA,SAAA;CAC9B,MAAA,UAAQ,cAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,6CAAQ;CACzB,MAAM,KAAA,MAAA,MAAc,EAAA;CAEpB,MAAM,cAAU,eACb;OACC,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAM;EAClC;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACC;CAGH,GAAA,CAAA,OAAM,WAAgB,CAAA;CACtB,MAAM,gBAAA,MAAA;CAEN,MAAM,uBAAsB,gBAAmC,gBAAA;OAC7D,YAAgB,UAAK,UAAA;EACrB,gBAAU,KAAA;EACV,IAAA,MAAQ,kBAAiB;EAEzB,MAAM,EAAA,iBAAc,MAAM,SAAQ;EAGlC,MAFoB,cAAe,MAAM,QAAQ;OAG/C,eAAM,MAAe,QAAA,aAAA,qBAAA,KAAA,GAAA;GACrB,MAAM,eAAY;GAClB,MAAM,YAAS,KAAA;GAGf,MAAM,SAAK,cAAM,MAAA,SAAA,KAAA,MAAA,KAAA,IAAA,MAAA,KAAA;GACnB,MAAA,KAAA,MAAA;EAEA;EAKA,MAAM,iBAAc,CAAA,MAAA,WAAA,CAAA,MAAA,WAAA,MAAA,IAAA,WAAA;EACpB,MAAM,KAAI,CAAA,QAAM;EAEhB,MAAM,IAAA,MAAA,QADW,OAAM,MAAA,QAAgB;EAGvC,MAAI,WAAA,KAAkB,MAAA,UACpB,MAAA,YAAoB;EAEvB,IAAA,kBAAA,SAAA,cAAA,MAAA;CAED,CAAA;CAEA,MAAA,CAAA,UAAQ,eAEL,SAAA;SACkC,eAAA,QAAA,YAAA,oBAAA,gBAAA,UAAA;;YACK,oBAAA,mBAAA,UAAA;;GAEP,UAAA;EACL,CAAA;CAK9B,CAAA,GAAA,CAAA,KAAQ,CAAA;SACC;EACP,MAAA,CAAA,cAAU,WAAA;EACV,UAAA;EACA,oBAAG;EACH,GAAA;EACA;EACF;CAEA;SACE,iBAAA;EACA;EACA,GAAA;EACD;CAED,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqCG,MAAO,KAAA,WAAc,SADH,IAAO,OACc;CACxC,OACH,cAAA,SAAA,OAAA,KAAA,CAAA"}
+{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.tsx"],"sourcesContent":["import {\n  useBooleanEvent,\n  useEvent,\n  useId,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant, isApple } from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, KeyboardEvent } from \"react\";\nimport { useCallback, useState } from \"react\";\nimport type { CompositeItemOptions } from \"../composite/composite-item.tsx\";\nimport { useCompositeItem } from \"../composite/composite-item.tsx\";\nimport {\n  TagRemoveIdContext,\n  TagValueContext,\n  useTagContext,\n} from \"./tag-context.tsx\";\nimport type { TagStore } from \"./tag-store.ts\";\nimport { useTouchDevice } from \"./utils.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `Tag` component.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx\n * const props = useTag();\n * <Role.div {...props} />\n * ```\n */\nexport const useTag = createHook<TagName, TagOptions>(function useTag({\n  store,\n  value,\n  getItem: getItemProp,\n  removeOnKeyPress = true,\n  ...props\n}) {\n  const context = useTagContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"Tag must be wrapped in a TagList component.\",\n  );\n\n  const id = useId(props.id);\n  const touchDevice = useTouchDevice();\n\n  const getItem = useCallback<NonNullable<CompositeItemOptions[\"getItem\"]>>(\n    (item) => {\n      const nextItem = { ...item, value };\n      if (getItemProp) {\n        return getItemProp(nextItem);\n      }\n      return nextItem;\n    },\n    [value, getItemProp],\n  );\n\n  const onKeyDownProp = props.onKeyDown;\n  const removeOnKeyPressProp = useBooleanEvent(removeOnKeyPress);\n\n  const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n    onKeyDownProp?.(event);\n    if (event.defaultPrevented) return;\n    const { inputElement } = store.getState();\n\n    const isBackspace = event.key === \"Backspace\";\n    const isRemoveKey = isBackspace || event.key === \"Delete\";\n\n    if (isRemoveKey && removeOnKeyPressProp(event)) {\n      event.preventDefault();\n      store.removeValue(value);\n      const nextId = isBackspace\n        ? store.previous() || store.next()\n        : store.next();\n      store.move(nextId);\n    }\n\n    const isPrintableKey =\n      !event.ctrlKey && !event.metaKey && event.key.length === 1;\n\n    // If it's cmd/ctrl+v, focus on the input element so the value is pasted\n    // there.\n    const pc = !isApple();\n    const v = event.key === \"v\" || event.key === \"V\";\n    const mod = pc ? event.ctrlKey : event.metaKey;\n    const isPaste = mod && v;\n\n    if (isPrintableKey || isPaste) {\n      inputElement?.focus();\n    }\n  });\n\n  const [removeId, setRemoveId] = useState<string>();\n\n  props = useWrapElement(\n    props,\n    (element) => (\n      <TagValueContext.Provider value={value}>\n        <TagRemoveIdContext.Provider value={setRemoveId}>\n          {element}\n        </TagRemoveIdContext.Provider>\n      </TagValueContext.Provider>\n    ),\n    [value],\n  );\n\n  props = {\n    role: !touchDevice ? \"option\" : \"listitem\",\n    children: value,\n    \"aria-describedby\": removeId,\n    ...props,\n    id,\n    onKeyDown,\n  };\n\n  props = useCompositeItem<TagName>({\n    store,\n    ...props,\n    getItem,\n  });\n\n  return props;\n});\n\n/**\n * Renders a tag element inside a\n * [`TagList`](https://ariakit.com/reference/tag-list) wrapper.\n *\n * The user can remove the tag by pressing `Backspace` or `Delete` keys when the\n * tag is focused. The\n * [`removeOnKeyPress`](https://ariakit.com/reference/tag#removeonkeypress) prop\n * can be used to disable this behavior.\n *\n * When a printable key is pressed, the focus is automatically moved to the\n * input element.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx {7-10}\n * <TagProvider>\n *   <TagListLabel>Invitees</TagListLabel>\n *   <TagList>\n *     <TagValues>\n *       {(values) =>\n *         values.map((value) => (\n *           <Tag key={value} value={value}>\n *             {value}\n *             <TagRemove />\n *           </Tag>\n *         ))\n *       }\n *     </TagValues>\n *     <TagInput />\n *   </TagList>\n * </TagProvider>\n * ```\n */\nexport const Tag = memo(\n  forwardRef(function Tag(props: TagProps) {\n    const htmlProps = useTag(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface TagOptions<\n  T extends ElementType = TagName,\n> extends CompositeItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTagStore`](https://ariakit.com/reference/use-tag-store) hook. If not\n   * provided, the closest [`TagList`](https://ariakit.com/reference/tag-list)\n   * component's context will be used.\n   */\n  store?: TagStore;\n  /**\n   * The unique value of the tag. This is automatically rendered as the tag's\n   * content if no children are provided.\n   */\n  value: string;\n  /**\n   * Defines the behavior of the `Backspace` and `Delete` keys when the tag is\n   * focused. If `true`, the tag is removed. If it's a function, it's invoked\n   * with the key event and should return a boolean.\n   * @default true\n   */\n  removeOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLType>>;\n}\n\nexport type TagProps<T extends ElementType = TagName> = Props<T, TagOptions<T>>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;MA6CE,SAAM,WAAU,SAAc,OAAA,EAAA,OAAA,OAAA,SAAA,aAAA,mBAAA,MAAA,GAAA,SAAA;CAC9B,MAAA,UAAQ,cAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAW,QAAQ,IAAA,aAAA,gBAAA,6CAAA;CACzB,MAAM,KAAA,MAAA,MAAc,EAAA;CAEpB,MAAM,cAAU,eACb;OACC,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAM;EAClC;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACC;CAGH,GAAA,CAAA,OAAM,WAAgB,CAAA;CACtB,MAAM,gBAAA,MAAA;CAEN,MAAM,uBAAsB,gBAAmC,gBAAA;OAC7D,YAAgB,UAAK,UAAA;EACrB,gBAAU,KAAA;EACV,IAAA,MAAQ,kBAAiB;EAEzB,MAAM,EAAA,iBAAc,MAAM,SAAQ;EAGlC,MAFoB,cAAe,MAAM,QAAQ;OAG/C,eAAM,MAAe,QAAA,aAAA,qBAAA,KAAA,GAAA;GACrB,MAAM,eAAY;GAClB,MAAM,YAAS,KAAA;GAGf,MAAM,SAAK,cAAM,MAAA,SAAA,KAAA,MAAA,KAAA,IAAA,MAAA,KAAA;GACnB,MAAA,KAAA,MAAA;EAEA;EAKA,MAAM,iBAAc,CAAA,MAAA,WAAA,CAAA,MAAA,WAAA,MAAA,IAAA,WAAA;EACpB,MAAM,KAAI,CAAA,QAAM;EAEhB,MAAM,IAAA,MAAA,QADW,OAAM,MAAA,QAAgB;EAGvC,MAAI,WAAA,KAAkB,MAAA,UACpB,MAAA,YAAoB;EAEvB,IAAA,kBAAA,SAAA,cAAA,MAAA;CAED,CAAA;CAEA,MAAA,CAAA,UAAQ,eAEL,SAAA;SACkC,eAAA,QAAA,YAAA,oBAAA,gBAAA,UAAA;;YACK,oBAAA,mBAAA,UAAA;;GAEP,UAAA;EACL,CAAA;CAK9B,CAAA,GAAA,CAAA,KAAQ,CAAA;SACC;EACP,MAAA,CAAA,cAAU,WAAA;EACV,UAAA;EACA,oBAAG;EACH,GAAA;EACA;EACF;CAEA;SACE,iBAAA;EACA;EACA,GAAA;EACD;CAED,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqCG,MAAO,KAAA,WAAc,SADH,IAAO,OACc;CACxC,OACH,cAAA,SAAA,OAAA,KAAA,CAAA"}

package/dist/toolbar/toolbar-container.d.ts

@@ -33,7 +33,7 @@ declare const useToolbarContainer: import("@ariakit/react-utils").Hook<"div", To
  * </Toolbar>
  * ```
  */
-declare const ToolbarContainer: (props: ToolbarContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const ToolbarContainer: (props: ToolbarContainerProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface ToolbarContainerOptions<T extends ElementType = TagName> extends ToolbarItemOptions<T>, Omit<CompositeContainerOptions<T>, "store"> {}
 type ToolbarContainerProps<T extends ElementType = TagName> = Props<T, ToolbarContainerOptions<T>>;
 //#endregion

package/dist/toolbar/toolbar-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-container.d.ts","names":["Props","ElementType","CompositeContainerOptions","ToolbarItemOptions","TagName","useToolbarContainer","ToolbarContainerOptions","Hook","ToolbarContainer","ToolbarContainerProps","props","ReactElement","JSXElementConstructor","T","Omit"],"sources":["../../src/toolbar/toolbar-container.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAe7B;;;;AAjB6D,cAiBxCC,mBAAAA,iCAAoDE,IAAAA,QAAYD,uBAAuB;AAa5G;;;;;;;;;AAAyJ;AACzJ;;AADA,cAAqBE,gBAAAA,GAAmBE,KAAAA,EAAOD,qBAAqB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnHN,uBAAAA,WAAkCL,WAAAA,GAAcG,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA,GAAIC,IAAAA,CAAKZ,yBAAAA,CAA0BW,CAAAA;AAAAA,KAE5HJ,qBAAAA,WAAgCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,uBAAAA,CAAwBO,CAAAA"}
+{"version":3,"file":"toolbar-container.d.ts","names":["Props","ElementType","CompositeContainerOptions","ToolbarItemOptions","TagName","useToolbarContainer","ToolbarContainerOptions","Hook","ToolbarContainer","ToolbarContainerProps","props","ReactElement","JSXElementConstructor","T","Omit"],"sources":["../../src/toolbar/toolbar-container.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAe7B;;;;AAjB6D,cAiBxCC,mBAAAA,iCAAoDE,IAAAA,QAAYD,uBAAuB;AAa5G;;;;;;;;;AAA6J;AAC7J;;AADA,cAAqBE,gBAAAA,GAAmBE,KAAAA,EAAOD,qBAAqB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACvHN,uBAAAA,WAAkCL,WAAAA,GAAcG,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA,GAAIC,IAAAA,CAAKZ,yBAAAA,CAA0BW,CAAAA;AAAAA,KAE5HJ,qBAAAA,WAAgCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,uBAAAA,CAAwBO,CAAAA"}

package/dist/toolbar/toolbar-input.d.ts

@@ -31,7 +31,7 @@ declare const useToolbarInput: import("@ariakit/react-utils").Hook<"input", Tool
  * </Toolbar>
  * ```
  */
-declare const ToolbarInput: (props: ToolbarInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const ToolbarInput: (props: ToolbarInputProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface ToolbarInputOptions<T extends ElementType = TagName> extends ToolbarItemOptions<T> {}
 type ToolbarInputProps<T extends ElementType = TagName> = Props<T, ToolbarInputOptions<T>>;
 //#endregion

package/dist/toolbar/toolbar-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-input.d.ts","names":["Props","ElementType","ToolbarItemOptions","TagName","useToolbarInput","ToolbarInputOptions","Hook","ToolbarInput","ToolbarInputProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/toolbar/toolbar-input.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAc7B;;;AAhB6D,cAgBxCC,eAAAA,iCAAgDE,IAAAA,UAAcD,mBAAmB;AAAA;AAatG;;;;;;;;;AAAiJ;AACjJ;AAdsG,cAajFE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC3GN,mBAAAA,WAA8BJ,WAAAA,GAAcE,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA;AAAAA,KAErFJ,iBAAAA,WAA4BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,mBAAAA,CAAoBO,CAAAA"}
+{"version":3,"file":"toolbar-input.d.ts","names":["Props","ElementType","ToolbarItemOptions","TagName","useToolbarInput","ToolbarInputOptions","Hook","ToolbarInput","ToolbarInputProps","props","ReactElement","JSXElementConstructor","T"],"sources":["../../src/toolbar/toolbar-input.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAc7B;;;AAhB6D,cAgBxCC,eAAAA,iCAAgDE,IAAAA,UAAcD,mBAAmB;AAAA;AAatG;;;;;;;;;AAAqJ;AACrJ;AAdsG,cAajFE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC/GN,mBAAAA,WAA8BJ,WAAAA,GAAcE,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA;AAAAA,KAErFJ,iBAAAA,WAA4BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,mBAAAA,CAAoBO,CAAAA"}

package/dist/toolbar/toolbar-item.d.ts

@@ -1,4 +1,4 @@
-import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { n as CompositeItemOptions } from "../composite-item-d4UXaZ84.js";
 import { t as ToolbarStore } from "../toolbar-store-Cs-9cGHx.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -30,7 +30,7 @@ declare const useToolbarItem: import("@ariakit/react-utils").Hook<"button", Tool
  * </Toolbar>
  * ```
  */
-declare const ToolbarItem: (props: ToolbarItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const ToolbarItem: (props: ToolbarItemProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface ToolbarItemOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
   /**
    * Object returned by the

package/dist/toolbar/toolbar-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-item.d.ts","names":["Props","ElementType","CompositeItemOptions","ToolbarStore","TagName","useToolbarItem","ToolbarItemOptions","Hook","ToolbarItem","ToolbarItemProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/toolbar/toolbar-item.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAa7B;;AAfuD,cAelCC,cAAAA,iCAA+CE,IAAAA,WAAeD,kBAAkB;;AAAA;AAYrG;;;;;;;;;cAAqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzGN,kBAAAA,WAA6BL,WAAAA,GAAcG,OAAAA,UAAiBF,oBAAAA,CAAqBW,CAAAA;EAA/D;;;;;;;EAQ/BC,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,gBAAAA,WAA2BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,kBAAAA,CAAmBO,CAAAA"}
+{"version":3,"file":"toolbar-item.d.ts","names":["Props","ElementType","CompositeItemOptions","ToolbarStore","TagName","useToolbarItem","ToolbarItemOptions","Hook","ToolbarItem","ToolbarItemProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/toolbar/toolbar-item.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAa7B;;AAfuD,cAelCC,cAAAA,iCAA+CE,IAAAA,WAAeD,kBAAkB;;AAAA;AAYrG;;;;;;;;;cAAqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC7GN,kBAAAA,WAA6BL,WAAAA,GAAcG,OAAAA,UAAiBF,oBAAAA,CAAqBW,CAAAA;EAA/D;;;;;;;EAQ/BC,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,gBAAAA,WAA2BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,kBAAAA,CAAmBO,CAAAA"}

package/dist/toolbar/toolbar-separator.d.ts

@@ -34,7 +34,7 @@ declare const useToolbarSeparator: import("@ariakit/react-utils").Hook<"hr", Too
  * </Toolbar>
  * ```
  */
-declare const ToolbarSeparator: (props: ToolbarSeparatorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const ToolbarSeparator: (props: ToolbarSeparatorProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface ToolbarSeparatorOptions<T extends ElementType = TagName> extends CompositeSeparatorOptions<T> {
   /**
    * Object returned by the

package/dist/toolbar/toolbar-separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-separator.d.ts","names":["Props","ElementType","CompositeSeparatorOptions","ToolbarStore","TagName","useToolbarSeparator","ToolbarSeparatorOptions","Hook","ToolbarSeparator","ToolbarSeparatorProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/toolbar/toolbar-separator.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAe7B;;;;AAjBuD,cAiBlCC,mBAAAA,iCAAoDE,IAAAA,OAAWD,uBAAuB;AAc3G;;;;;;;;;AAAyJ;AACzJ;;;AADA,cAAqBE,gBAAAA,GAAmBE,KAAAA,EAAOD,qBAAqB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnHN,uBAAAA,WAAkCL,WAAAA,GAAcG,OAAAA,UAAiBF,yBAAAA,CAA0BW,CAAAA;EAAAA;;;;;;;EAQxGC,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,qBAAAA,WAAgCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,uBAAAA,CAAwBO,CAAAA"}
+{"version":3,"file":"toolbar-separator.d.ts","names":["Props","ElementType","CompositeSeparatorOptions","ToolbarStore","TagName","useToolbarSeparator","ToolbarSeparatorOptions","Hook","ToolbarSeparator","ToolbarSeparatorProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/toolbar/toolbar-separator.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAe7B;;;;AAjBuD,cAiBlCC,mBAAAA,iCAAoDE,IAAAA,OAAWD,uBAAuB;AAc3G;;;;;;;;;AAA6J;AAC7J;;;AADA,cAAqBE,gBAAAA,GAAmBE,KAAAA,EAAOD,qBAAqB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACvHN,uBAAAA,WAAkCL,WAAAA,GAAcG,OAAAA,UAAiBF,yBAAAA,CAA0BW,CAAAA;EAAAA;;;;;;;EAQxGC,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,qBAAAA,WAAgCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,uBAAAA,CAAwBO,CAAAA"}

package/dist/toolbar/toolbar.d.ts

@@ -1,4 +1,4 @@
-import { n as CompositeOptions } from "../composite-DLvyFHMq.js";
+import { n as CompositeOptions } from "../composite-KBhCGLEy.js";
 import { i as ToolbarStoreProps, t as ToolbarStore } from "../toolbar-store-Cs-9cGHx.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -31,7 +31,7 @@ declare const useToolbar: import("@ariakit/react-utils").Hook<"div", ToolbarOpti
  * </Toolbar>
  * ```
  */
-declare const Toolbar: (props: ToolbarProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const Toolbar: (props: ToolbarProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface ToolbarOptions<T extends ElementType = TagName> extends CompositeOptions<T>, Pick<ToolbarStoreProps, "focusLoop" | "orientation" | "rtl" | "virtualFocus"> {
   /**
    * Object returned by the

package/dist/toolbar/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","names":["Props","ElementType","CompositeOptions","ToolbarStore","ToolbarStoreProps","TagName","useToolbar","ToolbarOptions","Hook","Toolbar","ToolbarProps","props","ReactElement","JSXElementConstructor","T","Pick","store"],"sources":["../../src/toolbar/toolbar.d.ts"],"mappings":";;;;;;cAIcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF6C;;;;AACrD;AAAA;;;;AACQ;AAc7B;;;AAhB0E,cAgBrDC,UAAAA,iCAA2CE,IAAAA,QAAYD,cAAc;AAAA;AAY1F;;;;;;;;;AAAuI;AAZ7C,cAYrEE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACjGN,cAAAA,WAAyBN,WAAAA,GAAcI,OAAAA,UAAiBH,gBAAAA,CAAiBY,CAAAA,GAAIC,IAAAA,CAAKX,iBAAAA;EAApEU;;;;;;;;;EAU3BE,KAAAA,GAAQb,YAAAA;AAAAA;AAAAA,KAEAO,YAAAA,WAAuBT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,cAAAA,CAAeO,CAAAA"}
+{"version":3,"file":"toolbar.d.ts","names":["Props","ElementType","CompositeOptions","ToolbarStore","ToolbarStoreProps","TagName","useToolbar","ToolbarOptions","Hook","Toolbar","ToolbarProps","props","ReactElement","JSXElementConstructor","T","Pick","store"],"sources":["../../src/toolbar/toolbar.d.ts"],"mappings":";;;;;;cAIcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF6C;;;;AACrD;AAAA;;;;AACQ;AAc7B;;;AAhB0E,cAgBrDC,UAAAA,iCAA2CE,IAAAA,QAAYD,cAAc;AAAA;AAY1F;;;;;;;;;AAA2I;AAZjD,cAYrEE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACrGN,cAAAA,WAAyBN,WAAAA,GAAcI,OAAAA,UAAiBH,gBAAAA,CAAiBY,CAAAA,GAAIC,IAAAA,CAAKX,iBAAAA;EAApEU;;;;;;;;;EAU3BE,KAAAA,GAAQb,YAAAA;AAAAA;AAAAA,KAEAO,YAAAA,WAAuBT,WAAAA,GAAcI,OAAAA,IAAWL,KAAAA,CAAMc,CAAAA,EAAGP,cAAAA,CAAeO,CAAAA"}

package/dist/tooltip/tooltip-anchor.d.ts

@@ -36,7 +36,7 @@ declare const useTooltipAnchor: import("@ariakit/react-utils").Hook<"div", Toolt
  * </TooltipProvider>
  * ```
  */
-declare const TooltipAnchor: (props: TooltipAnchorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TooltipAnchor: (props: TooltipAnchorProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface TooltipAnchorOptions<T extends ElementType = TagName> extends HovercardAnchorOptions<T> {
   /**
    * Object returned by the

package/dist/tooltip/tooltip-anchor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-anchor.d.ts","names":["Props","ElementType","HovercardAnchorOptions","TooltipStore","TagName","useTooltipAnchor","TooltipAnchorOptions","Hook","TooltipAnchor","TooltipAnchorProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/tooltip/tooltip-anchor.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAY7B;AAduD,cAclCC,gBAAAA,iCAAiDE,IAAAA,QAAYD,oBAAoB;;;AAAA;AAmBtG;;;;;;;;;AAAmJ;AACnJ;;;;;cADqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,WAA+BL,WAAAA,GAAcG,OAAAA,UAAiBF,sBAAAA,CAAuBW,CAAAA;EAAvBX;;;;;;;EAQ3EY,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,kBAAAA,WAA6BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,oBAAAA,CAAqBO,CAAAA"}
+{"version":3,"file":"tooltip-anchor.d.ts","names":["Props","ElementType","HovercardAnchorOptions","TooltipStore","TagName","useTooltipAnchor","TooltipAnchorOptions","Hook","TooltipAnchor","TooltipAnchorProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/tooltip/tooltip-anchor.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAY7B;AAduD,cAclCC,gBAAAA,iCAAiDE,IAAAA,QAAYD,oBAAoB;;;AAAA;AAmBtG;;;;;;;;;AAAuJ;AACvJ;;;;;cADqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACjHN,oBAAAA,WAA+BL,WAAAA,GAAcG,OAAAA,UAAiBF,sBAAAA,CAAuBW,CAAAA;EAAvBX;;;;;;;EAQ3EY,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,kBAAAA,WAA6BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,oBAAAA,CAAqBO,CAAAA"}

package/dist/tooltip/tooltip-anchor.js

@@ -9,6 +9,7 @@ import { createStore, sync } from "@ariakit/store";
 //#region src/tooltip/tooltip-anchor.tsx
 const TagName = "div";
 const globalStore = createStore({ activeStore: null });
+const hidingStores = /* @__PURE__ */ new WeakSet();
 function createRemoveStoreCallback(store) {
 	return () => {
 		const { activeStore } = globalStore.getState();
@@ -16,6 +17,12 @@ function createRemoveStoreCallback(store) {
 		globalStore.setState("activeStore", null);
 	};
 }
+function hideStore(store) {
+	if (!store) return;
+	hidingStores.add(store);
+	store.hide();
+	queueMicrotask(() => hidingStores.delete(store));
+}
 /**
 * Returns props to create a `TooltipAnchor` component.
 * @see https://ariakit.com/components/tooltip
@@ -30,7 +37,7 @@ function createRemoveStoreCallback(store) {
 const useTooltipAnchor = createHook(function useTooltipAnchor({ store, showOnHover = true, ...props }) {
 	const context = useTooltipProviderContext();
 	store = store || context;
-	invariant(store, "TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component.");
 	const canShowOnHoverRef = useRef(false);
 	useEffect(() => {
 		return sync(store, ["mounted"], (state) => {
@@ -40,14 +47,18 @@ const useTooltipAnchor = createHook(function useTooltipAnchor({ store, showOnHov
 	}, [store]);
 	useEffect(() => {
 		if (!store) return;
-		return chain(createRemoveStoreCallback(store), sync(store, ["mounted", "skipTimeout"], (state) => {
+		const removeStore = createRemoveStoreCallback(store);
+		return chain(removeStore, sync(store, ["mounted"], (state) => {
 			if (!store) return;
 			if (state.mounted) {
 				const { activeStore } = globalStore.getState();
-				if (activeStore !== store) activeStore?.hide();
+				if (activeStore !== store) {
+					if (hidingStores.has(store)) return;
+					hideStore(activeStore);
+				}
 				return globalStore.setState("activeStore", store);
 			}
-			const id = setTimeout(createRemoveStoreCallback(store), state.skipTimeout);
+			const id = setTimeout(removeStore, store.getState().skipTimeout);
 			return () => clearTimeout(id);
 		}));
 	}, [store]);

package/dist/tooltip/tooltip-anchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-anchor.js","names":[],"sources":["../../src/tooltip/tooltip-anchor.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { createStore, sync } from \"@ariakit/store\";\nimport { chain, invariant, isFalsyBooleanCallback } from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, MouseEvent } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type { HovercardAnchorOptions } from \"../hovercard/hovercard-anchor.tsx\";\nimport { useHovercardAnchor } from \"../hovercard/hovercard-anchor.tsx\";\nimport { useTooltipProviderContext } from \"./tooltip-context.tsx\";\nimport type { TooltipStore } from \"./tooltip-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n// Create a global store to keep track of the active tooltip store so we can\n// show other tooltips without a delay when there's already an active tooltip.\nconst globalStore = createStore<{ activeStore: TooltipStore | null }>({\n  activeStore: null,\n});\n\nfunction createRemoveStoreCallback(store: TooltipStore) {\n  return () => {\n    const { activeStore } = globalStore.getState();\n    if (activeStore !== store) return;\n    globalStore.setState(\"activeStore\", null);\n  };\n}\n\n/**\n * Returns props to create a `TooltipAnchor` component.\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx\n * const store = useToolTipStore();\n * const props = useTooltipAnchor({ store });\n * <Role {...props}>Anchor</Role>\n * <Tooltip store={store}>Tooltip</Tooltip>\n * ```\n */\nexport const useTooltipAnchor = createHook<TagName, TooltipAnchorOptions>(\n  function useTooltipAnchor({ store, showOnHover = true, ...props }) {\n    const context = useTooltipProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component.\",\n    );\n\n    // Imagine the scenario: the user hovers over an anchor, which shows a\n    // tooltip, then presses escape to close the tooltip. We don't want to show\n    // the tooltip again while the anchor is still hovered. So we keep this flag\n    // that's set to true on mouse enter.\n    const canShowOnHoverRef = useRef(false);\n\n    useEffect(() => {\n      return sync(store, [\"mounted\"], (state) => {\n        if (state.mounted) return;\n        canShowOnHoverRef.current = false;\n      });\n    }, [store]);\n\n    useEffect(() => {\n      if (!store) return;\n      return chain(\n        // Immediately remove the current store from the global store when\n        // the component unmounts. This is useful, for example, to avoid\n        // showing tooltips immediately on serial tests.\n        createRemoveStoreCallback(store),\n        sync(store, [\"mounted\", \"skipTimeout\"], (state) => {\n          if (!store) return;\n          // If the current tooltip is open, we should immediately hide the\n          // active one and set the current one as the active tooltip.\n          if (state.mounted) {\n            const { activeStore } = globalStore.getState();\n            if (activeStore !== store) {\n              activeStore?.hide();\n            }\n            return globalStore.setState(\"activeStore\", store);\n          }\n          // Otherwise, if the current tooltip is closed, we should set a\n          // timeout to hide the active tooltip in the global store. This is so\n          // we can show other tooltips without a delay when there's already an\n          // active tooltip (see the showOnHover method below).\n          const id = setTimeout(\n            createRemoveStoreCallback(store),\n            state.skipTimeout,\n          );\n          return () => clearTimeout(id);\n        }),\n      );\n    }, [store]);\n\n    const onMouseEnterProp = props.onMouseEnter;\n\n    const onMouseEnter = useEvent((event: MouseEvent<HTMLType>) => {\n      onMouseEnterProp?.(event);\n      canShowOnHoverRef.current = true;\n    });\n\n    const onFocusVisibleProp = props.onFocusVisible;\n\n    const onFocusVisible = useEvent((event: FocusEvent<HTMLType>) => {\n      onFocusVisibleProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.setAnchorElement(event.currentTarget);\n      store?.show();\n    });\n\n    const onBlurProp = props.onBlur;\n\n    const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n      onBlurProp?.(event);\n      if (event.defaultPrevented) return;\n      const { activeStore } = globalStore.getState();\n      // Sets canShowOnHover to false so moving the mouse over the anchor after\n      // it loses focus (for example, clicking on a menu button) doesn't show\n      // the tooltip until the mouse leaves and re-enters the anchor.\n      canShowOnHoverRef.current = false;\n      // If the current tooltip is the active tooltip and the anchor loses focus\n      // (for example, if the anchor is a menu button, clicking on the menu\n      // button will automatically focus on the menu), we don't want to show\n      // subsequent tooltips without a delay. So we set the active tooltip to\n      // null.\n      if (activeStore === store) {\n        globalStore.setState(\"activeStore\", null);\n      }\n    });\n\n    const type = useStoreState(store, \"type\");\n    const contentId = useStoreState(store, (state) => state.contentElement?.id);\n\n    props = {\n      \"aria-labelledby\":\n        type === \"label\" && props[\"aria-label\"] == null ? contentId : undefined,\n      ...props,\n      onMouseEnter,\n      onFocusVisible,\n      onBlur,\n    };\n\n    props = useHovercardAnchor<TagName>({\n      store,\n      showOnHover(event) {\n        if (!canShowOnHoverRef.current) return false;\n        if (isFalsyBooleanCallback(showOnHover, event)) return false;\n        const { activeStore } = globalStore.getState();\n        if (!activeStore) return true;\n        // Show the tooltip immediately if there's an active tooltip instead of\n        // waiting for the showTimeout delay.\n        store?.show();\n        return false;\n      },\n      ...props,\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a reference element for a\n * [`Tooltip`](https://ariakit.com/reference/tooltip), which is triggered by\n * focusing or hovering over the anchor.\n *\n * The tooltip is strictly for visual purposes. It's your responsibility to\n * ensure the anchor element has an accessible name. See [Tooltip anchors must\n * have accessible\n * names](https://ariakit.com/components/tooltip#tooltip-anchors-must-have-accessible-names)\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx {2}\n * <TooltipProvider>\n *   <TooltipAnchor>Anchor</TooltipAnchor>\n *   <Tooltip>Tooltip</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport const TooltipAnchor = forwardRef(function TooltipAnchor(\n  props: TooltipAnchorProps,\n) {\n  const htmlProps = useTooltipAnchor(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TooltipAnchorOptions<\n  T extends ElementType = TagName,\n> extends HovercardAnchorOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTooltipStore`](https://ariakit.com/reference/use-tooltip-store) hook.\n   * If not provided, the closest\n   * [`TooltipProvider`](https://ariakit.com/reference/tooltip-provider)\n   * component's context will be used.\n   */\n  store?: TooltipStore;\n}\n\nexport type TooltipAnchorProps<T extends ElementType = TagName> = Props<\n  T,\n  TooltipAnchorOptions<T>\n>;\n"],"mappings":";;;;;;;;;AAuBA,MAAM,UAAA;AAIN,MAAA,cAAS,YAAA,EAAA,aAA+C,KAAA,CAAA;SACtD,0BAAa,OAAA;cACH;EACR,MAAI,EAAA,gBAAgB,YAAO,SAAA;EAC3B,IAAA,gBAAY,OAAS;EACvB,YAAA,SAAA,eAAA,IAAA;CACF;;;;;;;;;;;;;MAeI,mBAAgB,WAAA,SAA0B,iBAAA,EAAA,OAAA,cAAA,MAAA,GAAA,SAAA;CAC1C,MAAA,UAAQ,0BAAS;CAEjB,QAAA,SAGI;CAOJ,UAAM,OAAA,yFAAgC;CAEtC,MAAA,oBAAgB,OAAA,KAAA;iBACF;SACN,KAAM,OAAA,CAAS,SAAA,IAAA,UAAA;GACnB,IAAA,MAAA,SAAkB;GACnB,kBAAA,UAAA;EACH,CAAA;CAEA,GAAA,CAAA,KAAA,CAAA;iBACc;EACZ,IAAA,CAAA,OAAO;SAME,MAAO,0BAAA,KAAA,GAAA,KAAA,OAAA,CAAA,WAAA,aAAA,IAAA,UAAA;GAGZ,IAAI,CAAA,OAAM;OACR,MAAQ,SAAA;IACR,MAAI,EAAA,gBAAgB,YAClB,SAAkB;IAEpB,IAAA,gBAAmB,OAAA,aAAS,KAAe;IAC7C,OAAA,YAAA,SAAA,eAAA,KAAA;GAKA;GAIA,MAAA,KAAA,WAAa,0BAAe,KAAA,GAAA,MAAA,WAAA;GAC7B,aACH,aAAA,EAAA;EACF,CAAA,CAAG;CAEH,GAAA,CAAA,KAAM,CAAA;CAEN,MAAM,mBAAe,MAAU;OAC7B,eAAmB,UAAK,UAAA;EACxB,mBAAkB,KAAA;EACnB,kBAAA,UAAA;CAED,CAAA;CAEA,MAAM,qBAAiB,MAAU;OAC/B,iBAAqB,UAAK,UAAA;EAC1B,qBAAU,KAAA;EACV,IAAA,MAAO,kBAAiB;EACxB,OAAO,iBAAK,MAAA,aAAA;EACb,OAAA,KAAA;CAED,CAAA;CAEA,MAAM,aAAS,MAAU;OACvB,SAAa,UAAK,UAAA;EAClB,aAAU,KAAA;EACV,IAAA,MAAQ,kBAAgB;EAIxB,MAAA,EAAA,gBAAkB,YAAU,SAAA;EAM5B,kBAAI,UACF;EAEH,IAAA,gBAAA,OAAA,YAAA,SAAA,eAAA,IAAA;CAED,CAAA;CACA,MAAM,OAAA,cAAY,OAAc,MAAQ;CAExC,MAAA,YAAQ,cAAA,QAAA,UAAA,MAAA,gBAAA,EAAA;SACN;EAEA,mBAAG,SAAA,WAAA,MAAA,iBAAA,OAAA,YAAA,KAAA;EACH,GAAA;EACA;EACA;EACF;CAEA;SACE,mBAAA;EACA;cACO,OAAA;GACL,IAAI,CAAA,kBAAA,SAAuB,OAAA;GAC3B,IAAA,uBAAwB,aAAY,KAAS,GAAA,OAAA;GAC7C,MAAK,EAAA,gBAAa,YAAO,SAAA;GAGzB,IAAA,CAAA,aAAY,OAAA;GACZ,OAAO,KAAA;GACT,OAAA;EACA;EACD,GAAA;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;MAwBE,gBAAqB,WADH,SAAA,cACqB,OAAA;CACxC,OAAA,cAAA,SAAA,iBAAA,KAAA,CAAA"}
+{"version":3,"file":"tooltip-anchor.js","names":[],"sources":["../../src/tooltip/tooltip-anchor.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { createStore, sync } from \"@ariakit/store\";\nimport { chain, invariant, isFalsyBooleanCallback } from \"@ariakit/utils\";\nimport type { ElementType, FocusEvent, MouseEvent } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport type { HovercardAnchorOptions } from \"../hovercard/hovercard-anchor.tsx\";\nimport { useHovercardAnchor } from \"../hovercard/hovercard-anchor.tsx\";\nimport { useTooltipProviderContext } from \"./tooltip-context.tsx\";\nimport type { TooltipStore } from \"./tooltip-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n// Create a global store to keep track of the active tooltip store so we can\n// show other tooltips without a delay when there's already an active tooltip.\nconst globalStore = createStore<{ activeStore: TooltipStore | null }>({\n  activeStore: null,\n});\n\nconst hidingStores = new WeakSet<TooltipStore>();\n\nfunction createRemoveStoreCallback(store: TooltipStore) {\n  return () => {\n    const { activeStore } = globalStore.getState();\n    if (activeStore !== store) return;\n    globalStore.setState(\"activeStore\", null);\n  };\n}\n\nfunction hideStore(store: TooltipStore | null) {\n  if (!store) return;\n  hidingStores.add(store);\n  store.hide();\n  // Cleanup runs after `hide()` so controlled `open` props still see this\n  // store in `hidingStores` when their batch microtask forces them open again.\n  queueMicrotask(() => hidingStores.delete(store));\n}\n\n/**\n * Returns props to create a `TooltipAnchor` component.\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx\n * const store = useToolTipStore();\n * const props = useTooltipAnchor({ store });\n * <Role {...props}>Anchor</Role>\n * <Tooltip store={store}>Tooltip</Tooltip>\n * ```\n */\nexport const useTooltipAnchor = createHook<TagName, TooltipAnchorOptions>(\n  function useTooltipAnchor({ store, showOnHover = true, ...props }) {\n    const context = useTooltipProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component.\",\n    );\n\n    // Imagine the scenario: the user hovers over an anchor, which shows a\n    // tooltip, then presses escape to close the tooltip. We don't want to show\n    // the tooltip again while the anchor is still hovered. So we keep this flag\n    // that's set to true on mouse enter.\n    const canShowOnHoverRef = useRef(false);\n\n    useEffect(() => {\n      return sync(store, [\"mounted\"], (state) => {\n        if (state.mounted) return;\n        canShowOnHoverRef.current = false;\n      });\n    }, [store]);\n\n    useEffect(() => {\n      if (!store) return;\n      const removeStore = createRemoveStoreCallback(store);\n      return chain(\n        // Immediately remove the current store from the global store when\n        // the component unmounts. This is useful, for example, to avoid\n        // showing tooltips immediately on serial tests.\n        removeStore,\n        sync(store, [\"mounted\"], (state) => {\n          if (!store) return;\n          // If the current tooltip is open, we should immediately hide the\n          // active one and set the current one as the active tooltip. If a\n          // tooltip we just hid gets forced open again, we leave the current\n          // active store in place to avoid a re-entrant loop between forced\n          // open tooltips.\n          if (state.mounted) {\n            const { activeStore } = globalStore.getState();\n            if (activeStore !== store) {\n              if (hidingStores.has(store)) return;\n              hideStore(activeStore);\n            }\n            return globalStore.setState(\"activeStore\", store);\n          }\n          // Otherwise, if the current tooltip is closed, we should set a\n          // timeout to hide the active tooltip in the global store. This is so\n          // we can show other tooltips without a delay when there's already an\n          // active tooltip (see the showOnHover method below).\n          // Read skipTimeout lazily because this sync only subscribes to\n          // mounted.\n          const id = setTimeout(removeStore, store.getState().skipTimeout);\n          return () => clearTimeout(id);\n        }),\n      );\n    }, [store]);\n\n    const onMouseEnterProp = props.onMouseEnter;\n\n    const onMouseEnter = useEvent((event: MouseEvent<HTMLType>) => {\n      onMouseEnterProp?.(event);\n      canShowOnHoverRef.current = true;\n    });\n\n    const onFocusVisibleProp = props.onFocusVisible;\n\n    const onFocusVisible = useEvent((event: FocusEvent<HTMLType>) => {\n      onFocusVisibleProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.setAnchorElement(event.currentTarget);\n      store?.show();\n    });\n\n    const onBlurProp = props.onBlur;\n\n    const onBlur = useEvent((event: FocusEvent<HTMLType>) => {\n      onBlurProp?.(event);\n      if (event.defaultPrevented) return;\n      const { activeStore } = globalStore.getState();\n      // Sets canShowOnHover to false so moving the mouse over the anchor after\n      // it loses focus (for example, clicking on a menu button) doesn't show\n      // the tooltip until the mouse leaves and re-enters the anchor.\n      canShowOnHoverRef.current = false;\n      // If the current tooltip is the active tooltip and the anchor loses focus\n      // (for example, if the anchor is a menu button, clicking on the menu\n      // button will automatically focus on the menu), we don't want to show\n      // subsequent tooltips without a delay. So we set the active tooltip to\n      // null.\n      if (activeStore === store) {\n        globalStore.setState(\"activeStore\", null);\n      }\n    });\n\n    const type = useStoreState(store, \"type\");\n    const contentId = useStoreState(store, (state) => state.contentElement?.id);\n\n    props = {\n      \"aria-labelledby\":\n        type === \"label\" && props[\"aria-label\"] == null ? contentId : undefined,\n      ...props,\n      onMouseEnter,\n      onFocusVisible,\n      onBlur,\n    };\n\n    props = useHovercardAnchor<TagName>({\n      store,\n      showOnHover(event) {\n        if (!canShowOnHoverRef.current) return false;\n        if (isFalsyBooleanCallback(showOnHover, event)) return false;\n        const { activeStore } = globalStore.getState();\n        if (!activeStore) return true;\n        // Show the tooltip immediately if there's an active tooltip instead of\n        // waiting for the showTimeout delay.\n        store?.show();\n        return false;\n      },\n      ...props,\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a reference element for a\n * [`Tooltip`](https://ariakit.com/reference/tooltip), which is triggered by\n * focusing or hovering over the anchor.\n *\n * The tooltip is strictly for visual purposes. It's your responsibility to\n * ensure the anchor element has an accessible name. See [Tooltip anchors must\n * have accessible\n * names](https://ariakit.com/components/tooltip#tooltip-anchors-must-have-accessible-names)\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx {2}\n * <TooltipProvider>\n *   <TooltipAnchor>Anchor</TooltipAnchor>\n *   <Tooltip>Tooltip</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport const TooltipAnchor = forwardRef(function TooltipAnchor(\n  props: TooltipAnchorProps,\n) {\n  const htmlProps = useTooltipAnchor(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TooltipAnchorOptions<\n  T extends ElementType = TagName,\n> extends HovercardAnchorOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTooltipStore`](https://ariakit.com/reference/use-tooltip-store) hook.\n   * If not provided, the closest\n   * [`TooltipProvider`](https://ariakit.com/reference/tooltip-provider)\n   * component's context will be used.\n   */\n  store?: TooltipStore;\n}\n\nexport type TooltipAnchorProps<T extends ElementType = TagName> = Props<\n  T,\n  TooltipAnchorOptions<T>\n>;\n"],"mappings":";;;;;;;;;AAuBA,MAAM,UAAA;AAIN,MAAM,cAAA,YAAA,EAAA,aAAmB,KAAsB,CAAA;AAE/C,MAAA,+BAAmC,IAAA,QAAqB;SACtD,0BAAa,OAAA;cACH;EACR,MAAI,EAAA,gBAAgB,YAAO,SAAA;EAC3B,IAAA,gBAAY,OAAS;EACvB,YAAA,SAAA,eAAA,IAAA;CACF;AAEA;SACO,UAAO,OAAA;CACZ,IAAA,CAAA,OAAA;CACA,aAAW,IAAA,KAAA;CAGX,MAAA,KAAA;CACF,qBAAA,aAAA,OAAA,KAAA,CAAA;;;;;;;;;;;;;MAeI,mBAAgB,WAAA,SAA0B,iBAAA,EAAA,OAAA,cAAA,MAAA,GAAA,SAAA;CAC1C,MAAA,UAAQ,0BAAS;CAEjB,QAAA,SAEE;CAQF,UAAM,OAAA,QAAA,IAAoB,aAAY,gBAAA,yFAAA;CAEtC,MAAA,oBAAgB,OAAA,KAAA;iBACF;SACN,KAAM,OAAA,CAAS,SAAA,IAAA,UAAA;GACnB,IAAA,MAAA,SAAkB;GACnB,kBAAA,UAAA;EACH,CAAA;CAEA,GAAA,CAAA,KAAA,CAAA;iBACc;EACZ,IAAA,CAAA,OAAM;EACN,MAAA,cAIE,0BACa,KAAS;SACf,MAAO,aAAA,KAAA,OAAA,CAAA,SAAA,IAAA,UAAA;GAMZ,IAAI,CAAA,OAAM;OACR,MAAQ,SAAA;IACR,MAAI,EAAA,gBAAgB,YAAO,SAAA;QACzB,gBAAiB,OAAS;KAC1B,IAAA,aAAU,IAAW,KAAA,GAAA;KACvB,UAAA,WAAA;IACA;IACF,OAAA,YAAA,SAAA,eAAA,KAAA;GAOA;GACA,MAAA,KAAA,WAAa,aAAe,MAAA,SAAA,EAAA,WAAA;GAC7B,aACH,aAAA,EAAA;EACF,CAAA,CAAG;CAEH,GAAA,CAAA,KAAM,CAAA;CAEN,MAAM,mBAAe,MAAU;OAC7B,eAAmB,UAAK,UAAA;EACxB,mBAAkB,KAAA;EACnB,kBAAA,UAAA;CAED,CAAA;CAEA,MAAM,qBAAiB,MAAU;OAC/B,iBAAqB,UAAK,UAAA;EAC1B,qBAAU,KAAA;EACV,IAAA,MAAO,kBAAiB;EACxB,OAAO,iBAAK,MAAA,aAAA;EACb,OAAA,KAAA;CAED,CAAA;CAEA,MAAM,aAAS,MAAU;OACvB,SAAa,UAAK,UAAA;EAClB,aAAU,KAAA;EACV,IAAA,MAAQ,kBAAgB;EAIxB,MAAA,EAAA,gBAAkB,YAAU,SAAA;EAM5B,kBAAI,UACF;EAEH,IAAA,gBAAA,OAAA,YAAA,SAAA,eAAA,IAAA;CAED,CAAA;CACA,MAAM,OAAA,cAAY,OAAc,MAAQ;CAExC,MAAA,YAAQ,cAAA,QAAA,UAAA,MAAA,gBAAA,EAAA;SACN;EAEA,mBAAG,SAAA,WAAA,MAAA,iBAAA,OAAA,YAAA,KAAA;EACH,GAAA;EACA;EACA;EACF;CAEA;SACE,mBAAA;EACA;cACO,OAAA;GACL,IAAI,CAAA,kBAAA,SAAuB,OAAA;GAC3B,IAAA,uBAAwB,aAAY,KAAS,GAAA,OAAA;GAC7C,MAAK,EAAA,gBAAa,YAAO,SAAA;GAGzB,IAAA,CAAA,aAAY,OAAA;GACZ,OAAO,KAAA;GACT,OAAA;EACA;EACD,GAAA;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;MAwBE,gBAAqB,WADH,SAAA,cACqB,OAAA;CACxC,OAAA,cAAA,SAAA,iBAAA,KAAA,CAAA"}

package/dist/tooltip/tooltip-arrow.d.ts

@@ -36,7 +36,7 @@ declare const useTooltipArrow: import("@ariakit/react-utils").Hook<"div", Toolti
  * </TooltipProvider>
  * ```
  */
-declare const TooltipArrow: (props: TooltipArrowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TooltipArrow: (props: TooltipArrowProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface TooltipArrowOptions<T extends ElementType = TagName> extends PopoverArrowOptions<T> {
   /**
    * Object returned by the

package/dist/tooltip/tooltip-arrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-arrow.d.ts","names":["Props","ElementType","PopoverArrowOptions","TooltipStore","TagName","useTooltipArrow","TooltipArrowOptions","Hook","TooltipArrow","TooltipArrowProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/tooltip/tooltip-arrow.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAe7B;;;;AAjBuD,cAiBlCC,eAAAA,iCAAgDE,IAAAA,QAAYD,mBAAmB;AAgBpG;;;;;;;;;AAAiJ;AACjJ;;;;;AADA,cAAqBE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC3GN,mBAAAA,WAA8BL,WAAAA,GAAcG,OAAAA,UAAiBF,mBAAAA,CAAoBW,CAAAA;EAApBX;;;;;;;;EAS1EY,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,iBAAAA,WAA4BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,mBAAAA,CAAoBO,CAAAA"}
+{"version":3,"file":"tooltip-arrow.d.ts","names":["Props","ElementType","PopoverArrowOptions","TooltipStore","TagName","useTooltipArrow","TooltipArrowOptions","Hook","TooltipArrow","TooltipArrowProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/tooltip/tooltip-arrow.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAe7B;;;;AAjBuD,cAiBlCC,eAAAA,iCAAgDE,IAAAA,QAAYD,mBAAmB;AAgBpG;;;;;;;;;AAAqJ;AACrJ;;;;;AADA,cAAqBE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC/GN,mBAAAA,WAA8BL,WAAAA,GAAcG,OAAAA,UAAiBF,mBAAAA,CAAoBW,CAAAA;EAApBX;;;;;;;;EAS1EY,KAAAA,GAAQX,YAAAA;AAAAA;AAAAA,KAEAM,iBAAAA,WAA4BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,mBAAAA,CAAoBO,CAAAA"}

package/dist/tooltip/tooltip-arrow.js

@@ -22,7 +22,7 @@ const TagName = "div";
 const useTooltipArrow = createHook(function useTooltipArrow({ store, size = 16, ...props }) {
 	const context = useTooltipContext();
 	store = store || context;
-	invariant(store, "TooltipArrow must be wrapped in a Tooltip component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "TooltipArrow must be wrapped in a Tooltip component.");
 	props = usePopoverArrow({
 		store,
 		size,

package/dist/tooltip/tooltip-arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-arrow.js","names":[],"sources":["../../src/tooltip/tooltip-arrow.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { PopoverArrowOptions } from \"../popover/popover-arrow.tsx\";\nimport { usePopoverArrow } from \"../popover/popover-arrow.tsx\";\nimport { useTooltipContext } from \"./tooltip-context.tsx\";\nimport type { TooltipStore } from \"./tooltip-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `TooltipArrow` component.\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx\n * const store = useToolTipStore();\n * const props = useTooltipArrow({ store });\n * <TooltipAnchor store={store}>Anchor</TooltipAnchor>\n * <Tooltip store={store}>\n *   <Role {...props} />\n *   Tooltip\n * </Tooltip>\n * ```\n */\nexport const useTooltipArrow = createHook<TagName, TooltipArrowOptions>(\n  function useTooltipArrow({ store, size = 16, ...props }) {\n    // We need to get the tooltip store here because Tooltip is not using the\n    // Popover component, so PopoverArrow can't access the popover context.\n    const context = useTooltipContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TooltipArrow must be wrapped in a Tooltip component.\",\n    );\n\n    props = usePopoverArrow({ store, size, ...props });\n    return props;\n  },\n);\n\n/**\n * Renders an arrow inside a [`Tooltip`](https://ariakit.com/reference/tooltip)\n * pointing to the anchor element.\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx {4}\n * <TooltipProvider>\n *   <TooltipAnchor>Anchor</TooltipAnchor>\n *   <Tooltip>\n *     <TooltipArrow />\n *     Tooltip\n *   </Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport const TooltipArrow = forwardRef(function TooltipArrow(\n  props: TooltipArrowProps,\n) {\n  const htmlProps = useTooltipArrow(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TooltipArrowOptions<\n  T extends ElementType = TagName,\n> extends PopoverArrowOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTooltipStore`](https://ariakit.com/reference/use-tooltip-store) hook.\n   * If not provided, the closest\n   * [`Tooltip`](https://ariakit.com/reference/tooltip) or\n   * [`TooltipProvider`](https://ariakit.com/reference/tooltip-provider)\n   * components' context will be used.\n   */\n  store?: TooltipStore;\n}\n\nexport type TooltipArrowProps<T extends ElementType = TagName> = Props<\n  T,\n  TooltipArrowOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;MA8BI,kBAAgB,WAAkB,SAAA,gBAAA,EAAA,OAAA,OAAA,IAAA,GAAA,SAAA;CAClC,MAAA,UAAQ,kBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAQ,OAAA,sDAAgB;SAAE,gBAAA;EAAO;EAAM;EAAU,GAAA;CACjD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;MAqBE,eAAO,WADW,SAAA,aACqB,OAAA;CACxC,OAAA,cAAA,SAAA,gBAAA,KAAA,CAAA"}
+{"version":3,"file":"tooltip-arrow.js","names":[],"sources":["../../src/tooltip/tooltip-arrow.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { PopoverArrowOptions } from \"../popover/popover-arrow.tsx\";\nimport { usePopoverArrow } from \"../popover/popover-arrow.tsx\";\nimport { useTooltipContext } from \"./tooltip-context.tsx\";\nimport type { TooltipStore } from \"./tooltip-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `TooltipArrow` component.\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx\n * const store = useToolTipStore();\n * const props = useTooltipArrow({ store });\n * <TooltipAnchor store={store}>Anchor</TooltipAnchor>\n * <Tooltip store={store}>\n *   <Role {...props} />\n *   Tooltip\n * </Tooltip>\n * ```\n */\nexport const useTooltipArrow = createHook<TagName, TooltipArrowOptions>(\n  function useTooltipArrow({ store, size = 16, ...props }) {\n    // We need to get the tooltip store here because Tooltip is not using the\n    // Popover component, so PopoverArrow can't access the popover context.\n    const context = useTooltipContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TooltipArrow must be wrapped in a Tooltip component.\",\n    );\n\n    props = usePopoverArrow({ store, size, ...props });\n    return props;\n  },\n);\n\n/**\n * Renders an arrow inside a [`Tooltip`](https://ariakit.com/reference/tooltip)\n * pointing to the anchor element.\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx {4}\n * <TooltipProvider>\n *   <TooltipAnchor>Anchor</TooltipAnchor>\n *   <Tooltip>\n *     <TooltipArrow />\n *     Tooltip\n *   </Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport const TooltipArrow = forwardRef(function TooltipArrow(\n  props: TooltipArrowProps,\n) {\n  const htmlProps = useTooltipArrow(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TooltipArrowOptions<\n  T extends ElementType = TagName,\n> extends PopoverArrowOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTooltipStore`](https://ariakit.com/reference/use-tooltip-store) hook.\n   * If not provided, the closest\n   * [`Tooltip`](https://ariakit.com/reference/tooltip) or\n   * [`TooltipProvider`](https://ariakit.com/reference/tooltip-provider)\n   * components' context will be used.\n   */\n  store?: TooltipStore;\n}\n\nexport type TooltipArrowProps<T extends ElementType = TagName> = Props<\n  T,\n  TooltipArrowOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;MA8BI,kBAAgB,WAAkB,SAAA,gBAAA,EAAA,OAAA,OAAA,IAAA,GAAA,SAAA;CAClC,MAAA,UAAQ,kBAAS;CAEjB,QAAA,SAEE;CAIF,UAAQ,OAAA,QAAgB,IAAA,aAAA,gBAAA,sDAAA;SAAE,gBAAA;EAAO;EAAM;EAAU,GAAA;CACjD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;MAqBE,eAAO,WADW,SAAA,aACqB,OAAA;CACxC,OAAA,cAAA,SAAA,gBAAA,KAAA,CAAA"}

package/dist/tooltip/tooltip.js

@@ -22,7 +22,7 @@ const TagName = "div";
 const useTooltip = createHook(function useTooltip({ store, portal = true, gutter = 8, preserveTabOrder = false, hideOnHoverOutside = true, hideOnInteractOutside = true, ...props }) {
 	const context = useTooltipProviderContext();
 	store = store || context;
-	invariant(store, "Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component.");
 	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(TooltipScopedContextProvider, {
 		value: store,
 		children: element

package/dist/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { contains, invariant, isFalsyBooleanCallback } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { createDialogComponent } from \"../dialog/dialog.tsx\";\nimport type { HovercardOptions } from \"../hovercard/hovercard.tsx\";\nimport { useHovercard } from \"../hovercard/hovercard.tsx\";\nimport {\n  TooltipScopedContextProvider,\n  useTooltipProviderContext,\n} from \"./tooltip-context.tsx\";\nimport type { TooltipStore } from \"./tooltip-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `Tooltip` component.\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx\n * const store = useToolTipStore();\n * const props = useTooltip({ store });\n * <TooltipAnchor store={store}>Anchor</TooltipAnchor>\n * <Role {...props}>Tooltip</Role>\n * ```\n */\nexport const useTooltip = createHook<TagName, TooltipOptions>(\n  function useTooltip({\n    store,\n    portal = true,\n    gutter = 8,\n    preserveTabOrder = false,\n    hideOnHoverOutside = true,\n    hideOnInteractOutside = true,\n    ...props\n  }) {\n    const context = useTooltipProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component.\",\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <TooltipScopedContextProvider value={store}>\n          {element}\n        </TooltipScopedContextProvider>\n      ),\n      [store],\n    );\n\n    const role = useStoreState(store, (state) =>\n      state.type === \"description\" ? \"tooltip\" : \"none\",\n    );\n\n    props = { role, ...props };\n\n    props = useHovercard({\n      ...props,\n      store,\n      portal,\n      gutter,\n      preserveTabOrder,\n      hideOnHoverOutside(event) {\n        if (isFalsyBooleanCallback(hideOnHoverOutside, event)) return false;\n        const anchorElement = store?.getState().anchorElement;\n        if (!anchorElement) return true;\n        // If the anchor element has the `data-focus-visible` attribute (added\n        // by the `Focusable` component that is used by several components), we\n        // don't hide the tooltip when the mouse leaves the anchor element. In\n        // this case, the tooltip will be hidden only if the user presses the\n        // Escape key or if the anchor element loses focus.\n        if (\"focusVisible\" in anchorElement.dataset) return false;\n        return true;\n      },\n      hideOnInteractOutside: (event) => {\n        if (isFalsyBooleanCallback(hideOnInteractOutside, event)) return false;\n        const anchorElement = store?.getState().anchorElement;\n        if (!anchorElement) return true;\n        // Prevent hiding the tooltip when the user interacts with the anchor\n        // element. It's up to the developer to hide the tooltip when the user\n        // clicks on the anchor element if that's the intended behavior.\n        if (contains(anchorElement, event.target as Node)) return false;\n        return true;\n      },\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a tooltip element that visually describes a\n * [`TooltipAnchor`](https://ariakit.com/reference/tooltip-anchor) when it\n * receives focus or is hovered.\n *\n * The tooltip is strictly for visual purposes. It's your responsibility to\n * ensure the anchor element has an accessible name. See [Tooltip anchors must\n * have accessible\n * names](https://ariakit.com/components/tooltip#tooltip-anchors-must-have-accessible-names)\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx {3}\n * <TooltipProvider>\n *   <TooltipAnchor>Anchor</TooltipAnchor>\n *   <Tooltip>Tooltip</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport const Tooltip = createDialogComponent(\n  forwardRef(function Tooltip(props: TooltipProps) {\n    const htmlProps = useTooltip(props);\n    return createElement(TagName, htmlProps);\n  }),\n  useTooltipProviderContext,\n);\n\nexport interface TooltipOptions<\n  T extends ElementType = TagName,\n> extends HovercardOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTooltipStore`](https://ariakit.com/reference/use-tooltip-store) hook.\n   * If not provided, the closest\n   * [`TooltipProvider`](https://ariakit.com/reference/tooltip-provider)\n   * component's context will be used.\n   */\n  store?: TooltipStore;\n  /**\n   * @default true\n   */\n  portal?: HovercardOptions<T>[\"portal\"];\n  /**\n   * @default 8\n   */\n  gutter?: HovercardOptions<T>[\"gutter\"];\n}\n\nexport type TooltipProps<T extends ElementType = TagName> = Props<\n  T,\n  TooltipOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;MA2CI,aAAgB,WAAA,SAAA,WAA0B,EAAA,OAAA,SAAA,MAAA,SAAA,GAAA,mBAAA,OAAA,qBAAA,MAAA,wBAAA,MAAA,GAAA,SAAA;CAC1C,MAAA,UAAQ,0BAAS;CAEjB,QAAA,SAGI;CAGJ,UAAQ,OAAA,mFAGJ;SAAqC,eAAA,QAAA,YAAA,oBAAA,8BAAA;;EAEP,UAGlC;CAMA,CAAA,GAAA,CAAA,KAAQ,CAAA;SAJK;EAIG,MAAG,cAAA,QAAA,UAAA,MAAA,SAAA,gBAAA,YAAA,MAAA;EAAM,GAAA;CAEzB;SACK,aAAA;EACH,GAAA;EACA;EACA;EACA;EACA;qBACM,OAAA;GACJ,IAAA,uBAAsB,oBAAkB,KAAA,GAAA,OAAA;GACxC,MAAK,gBAAe,OAAO,SAAA,EAAA;GAM3B,IAAI,CAAA,eAAA,OAAkB;GACtB,IAAA,kBAAO,cAAA,SAAA,OAAA;GACT,OAAA;EACA;0BACM,UAAuB;GAC3B,IAAA,uBAAsB,uBAAkB,KAAA,GAAA,OAAA;GACxC,MAAK,gBAAe,OAAO,SAAA,EAAA;GAI3B,IAAI,CAAA,eAAS,OAAA;GACb,IAAA,SAAO,eAAA,MAAA,MAAA,GAAA,OAAA;GACT,OAAA;EACD;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;MAuBI,UAAO,sBADW,WACqB,SAAA,QAAA,OAAA;CACxC,OACD,cAAA,SACF,WAAA,KAAA,CAAA"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { contains, invariant, isFalsyBooleanCallback } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { createDialogComponent } from \"../dialog/dialog.tsx\";\nimport type { HovercardOptions } from \"../hovercard/hovercard.tsx\";\nimport { useHovercard } from \"../hovercard/hovercard.tsx\";\nimport {\n  TooltipScopedContextProvider,\n  useTooltipProviderContext,\n} from \"./tooltip-context.tsx\";\nimport type { TooltipStore } from \"./tooltip-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `Tooltip` component.\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx\n * const store = useToolTipStore();\n * const props = useTooltip({ store });\n * <TooltipAnchor store={store}>Anchor</TooltipAnchor>\n * <Role {...props}>Tooltip</Role>\n * ```\n */\nexport const useTooltip = createHook<TagName, TooltipOptions>(\n  function useTooltip({\n    store,\n    portal = true,\n    gutter = 8,\n    preserveTabOrder = false,\n    hideOnHoverOutside = true,\n    hideOnInteractOutside = true,\n    ...props\n  }) {\n    const context = useTooltipProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component.\",\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <TooltipScopedContextProvider value={store}>\n          {element}\n        </TooltipScopedContextProvider>\n      ),\n      [store],\n    );\n\n    const role = useStoreState(store, (state) =>\n      state.type === \"description\" ? \"tooltip\" : \"none\",\n    );\n\n    props = { role, ...props };\n\n    props = useHovercard({\n      ...props,\n      store,\n      portal,\n      gutter,\n      preserveTabOrder,\n      hideOnHoverOutside(event) {\n        if (isFalsyBooleanCallback(hideOnHoverOutside, event)) return false;\n        const anchorElement = store?.getState().anchorElement;\n        if (!anchorElement) return true;\n        // If the anchor element has the `data-focus-visible` attribute (added\n        // by the `Focusable` component that is used by several components), we\n        // don't hide the tooltip when the mouse leaves the anchor element. In\n        // this case, the tooltip will be hidden only if the user presses the\n        // Escape key or if the anchor element loses focus.\n        if (\"focusVisible\" in anchorElement.dataset) return false;\n        return true;\n      },\n      hideOnInteractOutside: (event) => {\n        if (isFalsyBooleanCallback(hideOnInteractOutside, event)) return false;\n        const anchorElement = store?.getState().anchorElement;\n        if (!anchorElement) return true;\n        // Prevent hiding the tooltip when the user interacts with the anchor\n        // element. It's up to the developer to hide the tooltip when the user\n        // clicks on the anchor element if that's the intended behavior.\n        if (contains(anchorElement, event.target as Node)) return false;\n        return true;\n      },\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a tooltip element that visually describes a\n * [`TooltipAnchor`](https://ariakit.com/reference/tooltip-anchor) when it\n * receives focus or is hovered.\n *\n * The tooltip is strictly for visual purposes. It's your responsibility to\n * ensure the anchor element has an accessible name. See [Tooltip anchors must\n * have accessible\n * names](https://ariakit.com/components/tooltip#tooltip-anchors-must-have-accessible-names)\n * @see https://ariakit.com/components/tooltip\n * @example\n * ```jsx {3}\n * <TooltipProvider>\n *   <TooltipAnchor>Anchor</TooltipAnchor>\n *   <Tooltip>Tooltip</Tooltip>\n * </TooltipProvider>\n * ```\n */\nexport const Tooltip = createDialogComponent(\n  forwardRef(function Tooltip(props: TooltipProps) {\n    const htmlProps = useTooltip(props);\n    return createElement(TagName, htmlProps);\n  }),\n  useTooltipProviderContext,\n);\n\nexport interface TooltipOptions<\n  T extends ElementType = TagName,\n> extends HovercardOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTooltipStore`](https://ariakit.com/reference/use-tooltip-store) hook.\n   * If not provided, the closest\n   * [`TooltipProvider`](https://ariakit.com/reference/tooltip-provider)\n   * component's context will be used.\n   */\n  store?: TooltipStore;\n  /**\n   * @default true\n   */\n  portal?: HovercardOptions<T>[\"portal\"];\n  /**\n   * @default 8\n   */\n  gutter?: HovercardOptions<T>[\"gutter\"];\n}\n\nexport type TooltipProps<T extends ElementType = TagName> = Props<\n  T,\n  TooltipOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;MA2CI,aAAgB,WAAA,SAAA,WAA0B,EAAA,OAAA,SAAA,MAAA,SAAA,GAAA,mBAAA,OAAA,qBAAA,MAAA,wBAAA,MAAA,GAAA,SAAA;CAC1C,MAAA,UAAQ,0BAAS;CAEjB,QAAA,SAEE;CAIF,UAAQ,OAAA,QACN,IAAA,aACC,gBACC,mFAAA;SAAqC,eAAA,QAAA,YAAA,oBAAA,8BAAA;;EAEP,UAGlC;CAMA,CAAA,GAAA,CAAA,KAAQ,CAAA;SAJK;EAIG,MAAG,cAAA,QAAA,UAAA,MAAA,SAAA,gBAAA,YAAA,MAAA;EAAM,GAAA;CAEzB;SACK,aAAA;EACH,GAAA;EACA;EACA;EACA;EACA;qBACM,OAAA;GACJ,IAAA,uBAAsB,oBAAkB,KAAA,GAAA,OAAA;GACxC,MAAK,gBAAe,OAAO,SAAA,EAAA;GAM3B,IAAI,CAAA,eAAA,OAAkB;GACtB,IAAA,kBAAO,cAAA,SAAA,OAAA;GACT,OAAA;EACA;0BACM,UAAuB;GAC3B,IAAA,uBAAsB,uBAAkB,KAAA,GAAA,OAAA;GACxC,MAAK,gBAAe,OAAO,SAAA,EAAA;GAI3B,IAAI,CAAA,eAAS,OAAA;GACb,IAAA,SAAO,eAAA,MAAA,MAAA,GAAA,OAAA;GACT,OAAA;EACD;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;MAuBI,UAAO,sBADW,WACqB,SAAA,QAAA,OAAA;CACxC,OACD,cAAA,SACF,WAAA,KAAA,CAAA"}

package/dist/visually-hidden/visually-hidden.d.ts

@@ -29,7 +29,7 @@ declare const useVisuallyHidden: import("@ariakit/react-utils").Hook<"span", Vis
  * </a>
  * ```
  */
-declare const VisuallyHidden: (props: VisuallyHiddenProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const VisuallyHidden: (props: VisuallyHiddenProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface VisuallyHiddenOptions<_T extends ElementType = TagName> extends Options {}
 type VisuallyHiddenProps<T extends ElementType = TagName> = Props<T, VisuallyHiddenOptions<T>>;
 //#endregion

package/dist/visually-hidden/visually-hidden.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visually-hidden.d.ts","names":["Options","Props","ElementType","TagName","useVisuallyHidden","VisuallyHiddenOptions","Hook","VisuallyHidden","VisuallyHiddenProps","props","ReactElement","JSXElementConstructor","_T","T"],"sources":["../../src/visually-hidden/visually-hidden.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFY;;;;AACpB;AAAA;;;;AACQ;AAc7B;;;AAhByC,cAgBpBC,iBAAAA,iCAAkDE,IAAAA,SAAaD,qBAAqB;AAAA;AAYzG;;;;;;;;;AAAqJ;AAZ5C,cAYpFE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/GN,qBAAAA,YAAiCH,WAAAA,GAAcC,OAAAA,UAAiBH,OAAAA;AAAAA,KAErEQ,mBAAAA,WAA8BN,WAAAA,GAAcC,OAAAA,IAAWF,KAAAA,CAAMY,CAAAA,EAAGR,qBAAAA,CAAsBQ,CAAAA"}
+{"version":3,"file":"visually-hidden.d.ts","names":["Options","Props","ElementType","TagName","useVisuallyHidden","VisuallyHiddenOptions","Hook","VisuallyHidden","VisuallyHiddenProps","props","ReactElement","JSXElementConstructor","_T","T"],"sources":["../../src/visually-hidden/visually-hidden.d.ts"],"mappings":";;;;cAEcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFY;;;;AACpB;AAAA;;;;AACQ;AAc7B;;;AAhByC,cAgBpBC,iBAAAA,iCAAkDE,IAAAA,SAAaD,qBAAqB;AAAA;AAYzG;;;;;;;;;AAAyJ;AAZhD,cAYpFE,cAAAA,GAAiBE,KAAAA,EAAOD,mBAAmB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACnHN,qBAAAA,YAAiCH,WAAAA,GAAcC,OAAAA,UAAiBH,OAAAA;AAAAA,KAErEQ,mBAAAA,WAA8BN,WAAAA,GAAcC,OAAAA,IAAWF,KAAAA,CAAMY,CAAAA,EAAGR,qBAAAA,CAAsBQ,CAAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ariakit/react-components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Ariakit React components",
   "keywords": [
     "ariakit",
@@ -23,15 +23,15 @@
   "sideEffects": false,
   "dependencies": {
     "@floating-ui/dom": "^1.0.0",
-    "@ariakit/components": "0.1.1",
-    "@ariakit/react-store": "0.1.1",
-    "@ariakit/react-utils": "0.1.1",
-    "@ariakit/store": "0.1.1",
-    "@ariakit/utils": "0.1.1"
+    "@ariakit/components": "0.1.2",
+    "@ariakit/react-store": "0.1.2",
+    "@ariakit/react-utils": "0.1.2",
+    "@ariakit/store": "0.1.2",
+    "@ariakit/utils": "0.1.2"
   },
   "devDependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
     "@ariakit/scripts": "0.0.0"
   },
   "peerDependencies": {

package/src/collection/collection-item-offscreen.tsx

@@ -55,7 +55,7 @@ export function useCollectionItemOffscreen<
       invariant(
         offscreenRoot !== undefined,
         process.env.NODE_ENV !== "production" &&
-          "The offscreenRoot prop must provided.",
+          "The offscreenRoot prop must be provided.",
       );
 
       const getOffscreenRoot = () => {

package/src/combobox/combobox.tsx

@@ -293,6 +293,16 @@ export const useCombobox = createHook<TagName, ComboboxOptions>(
     const scrollingElementRef = useRef<Element | null>(null);
     const getAutoSelectIdProp = useEvent(getAutoSelectId);
     const autoSelectIdRef = useRef<string | null | undefined>(null);
+    // Tracks the item (id and value) the autoSelect behavior last moved focus
+    // to, so we can tell an already-focused item apart from one that only looks
+    // the same, such as a different value under the same id (e.g. an index-keyed
+    // list after filtering) or an item that became active without focus. This is
+    // distinct from autoSelectIdRef above, which tracks the current target for
+    // the scroll guard. Reset when the popover closes so reopening re-focuses.
+    const autoSelectMovedRef = useRef<{
+      id: string | null;
+      value?: string;
+    }>(undefined);
     const userScrolledRef = useRef(false);
     const isAutoScrollingRef = useRef(false);
 
@@ -358,6 +368,13 @@ export const useCombobox = createHook<TagName, ComboboxOptions>(
       canAutoSelectRef.current = open;
     }, [autoSelect, open]);
 
+    // Reset the auto-moved item when the popover closes so reopening re-focuses
+    // the auto-selected item.
+    useSafeLayoutEffect(() => {
+      if (open) return;
+      autoSelectMovedRef.current = undefined;
+    }, [open]);
+
     const resetValueOnSelect = useStoreState(store, "resetValueOnSelect");
 
     // Auto select the first item on type. This effect runs both when the value
@@ -391,7 +408,36 @@ export const useCombobox = createHook<TagName, ComboboxOptions>(
         // are disabled), we should move the focus to the input (null),
         // otherwise, with async items, the activeValue won't be reset. TODO:
         // Test this.
-        store.move(autoSelectId ?? null);
+        const nextActiveId = autoSelectId ?? null;
+        const nextActiveValue = store.item(nextActiveId)?.value;
+        const moved = autoSelectMovedRef.current;
+        // Move when the auto-select target changes: a different active item, a
+        // different target id, or the same id now holding a different value
+        // (for example, a list keyed by index whose first item's value changes
+        // after filtering, or asynchronously loaded items). We avoid re-moving
+        // to the exact item we already moved to, because store.move() always
+        // increments the `moves` counter, which makes the Composite component
+        // re-focus the active item. Re-focusing when only the rendered items
+        // changed (for example, a virtualized list resizing because a mobile
+        // keyboard's autocomplete bar changed the available height) would bounce
+        // focus off the input and back and drop characters as the user types.
+        // See https://github.com/ariakit/ariakit/issues/3837
+        if (
+          nextActiveId !== activeId ||
+          moved?.id !== nextActiveId ||
+          moved?.value !== nextActiveValue
+        ) {
+          autoSelectMovedRef.current = {
+            id: nextActiveId,
+            value: nextActiveValue,
+          };
+          store.move(nextActiveId);
+        } else {
+          // The same item is already the focused active item, so we skip the
+          // move to avoid re-focusing it. Keep activeValue in sync (a no-op
+          // here since the value is unchanged) the way store.move() would.
+          store.setState("activeValue", nextActiveValue);
+        }
       } else {
         // Reset the scroll position to the active item when an item is selected
         // and the combobox value is reset, which might move the active item

package/src/composite/composite-container.tsx

@@ -20,7 +20,7 @@ import {
 } from "@ariakit/utils";
 import type { ElementType, FocusEvent, KeyboardEvent, MouseEvent } from "react";
 import { useEffect, useRef } from "react";
-import { useCompositeContext } from "./composite-context.tsx";
+import { useCompositeScopedContext } from "./composite-context.tsx";
 import type { CompositeStore } from "./composite-store.ts";
 import { selectTextField } from "./utils.ts";
 
@@ -56,7 +56,7 @@ export const useCompositeContainer = createHook<
   TagName,
   CompositeContainerOptions
 >(function useCompositeContainer({ store, ...props }) {
-  const context = useCompositeContext();
+  const context = useCompositeScopedContext();
   store = store || context;
 
   const ref = useRef<HTMLType>(null);

package/src/composite/composite-hover.tsx

@@ -15,29 +15,22 @@ import {
   hasFocusWithin,
   hasOwnProperty,
   invariant,
+  isElement,
   removeUndefinedValues,
 } from "@ariakit/utils";
 import type { BooleanOrCallback } from "@ariakit/utils";
 import type { ElementType, MouseEvent as ReactMouseEvent } from "react";
 import { useCallback } from "react";
-import { useCompositeContext } from "./composite-context.tsx";
+import { useCompositeScopedContext } from "./composite-context.tsx";
 import type { CompositeStore } from "./composite-store.ts";
 
 const TagName = "div" satisfies ElementType;
 type TagName = typeof TagName;
 type HTMLType = HTMLElementTagNameMap[TagName];
 
-function getMouseDestination(event: ReactMouseEvent<HTMLElement>) {
-  const relatedTarget = event.relatedTarget as Node | null;
-  if (relatedTarget?.nodeType === Node.ELEMENT_NODE) {
-    return relatedTarget as Element;
-  }
-  return null;
-}
-
 function hoveringInside(event: ReactMouseEvent<HTMLElement>) {
-  const nextElement = getMouseDestination(event);
-  if (!nextElement) return false;
+  const nextElement = event.relatedTarget;
+  if (!isElement(nextElement)) return false;
   return contains(event.currentTarget, nextElement);
 }
 
@@ -45,8 +38,9 @@ const symbol = Symbol("composite-hover");
 type ElementWithSymbol = HTMLElement & { [symbol]?: boolean };
 
 function movingToAnotherItem(event: ReactMouseEvent<HTMLElement>) {
-  let dest = getMouseDestination(event);
-  if (!dest) return false;
+  const { relatedTarget } = event;
+  if (!isElement(relatedTarget)) return false;
+  let dest: Element | null = relatedTarget;
   do {
     if (hasOwnProperty(dest, symbol) && dest[symbol]) return true;
     dest = dest.parentElement;
@@ -75,7 +69,7 @@ export const useCompositeHover = createHook<TagName, CompositeHoverOptions>(
     blurOnHoverEnd = !!focusOnHover,
     ...props
   }) {
-    const context = useCompositeContext();
+    const context = useCompositeScopedContext();
     store = store || context;
 
     invariant(

package/src/composite/composite-item-offscreen.tsx

@@ -8,7 +8,7 @@ import { useCollectionItemOffscreen } from "../collection/collection-item-offscr
 import type { ComboboxStoreState } from "../combobox/combobox-store.ts";
 import { Role } from "../role/role.tsx";
 import type { SelectStoreState } from "../select/select-store.ts";
-import { useCompositeContext } from "./composite-context.tsx";
+import { useCompositeScopedContext } from "./composite-context.tsx";
 import * as Base from "./composite-item.tsx";
 import type { CompositeStoreState } from "./composite-store.ts";
 
@@ -20,7 +20,7 @@ export function useCompositeItemOffscreen<
   // oxlint-disable-next-line no-unnecessary-type-parameters
   P extends CompositeItemProps<T>,
 >({ store, offscreenMode = "active", disabled, value, ...props }: P) {
-  const context = useCompositeContext();
+  const context = useCompositeScopedContext();
   store = store || context;
 
   const id = useId(props.id);

package/src/composite/composite-item.tsx

@@ -39,7 +39,7 @@ import { useCommand } from "../command/command.tsx";
 import {
   CompositeItemContext,
   CompositeRowContext,
-  useCompositeContext,
+  useCompositeScopedContext,
 } from "./composite-context.tsx";
 import type { CompositeStore } from "./composite-store.ts";
 import {
@@ -155,7 +155,7 @@ export const useCompositeItem = createHook<TagName, CompositeItemOptions>(
     "aria-posinset": ariaPosInSetProp,
     ...props
   }) {
-    const context = useCompositeContext();
+    const context = useCompositeScopedContext();
     store = store || context;
 
     const id = useId(props.id);