@ariakit/react-core 0.4.4 → 0.4.6

package/cjs/combobox/combobox-value.cjs

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _EO4IBCRNcjs = require('../__chunks/EO4IBCRN.cjs');
+require('../__chunks/5J6PQR7O.cjs');
+require('../__chunks/WKI4JZZH.cjs');
+require('../__chunks/JE2SKI3E.cjs');
+require('../__chunks/ZPVTVHP7.cjs');
+require('../__chunks/WT4MTRKY.cjs');
+require('../__chunks/R2YVMKBR.cjs');
+require('../__chunks/QFX6UW2F.cjs');
+require('../__chunks/U2WARLXR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
+
+// src/combobox/combobox-value.tsx
+var _misc = require('@ariakit/core/utils/misc');
+function ComboboxValue({ store, children } = {}) {
+  const context = _EO4IBCRNcjs.useComboboxContext.call(void 0, );
+  store = store || context;
+  _misc.invariant.call(void 0, 
+    store,
+    process.env.NODE_ENV !== "production" && "ComboboxValue must receive a `store` prop or be wrapped in a ComboboxProvider component."
+  );
+  const value = store.useState("value");
+  if (children) {
+    return children(value);
+  }
+  return value;
+}
+
+
+exports.ComboboxValue = ComboboxValue;

package/cjs/combobox/combobox-value.d.cts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.ts";
+/**
+ * Renders the current
+ * [`value`](https://ariakit.org/reference/use-combobox-store#value) state in
+ * the [combobox store](https://ariakit.org/reference/use-combobox-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props.
+ *
+ * It takes a
+ * [`children`](https://ariakit.org/reference/combobox-value#children) function
+ * that gets called with the current value as an argument. This can be used as
+ * an uncontrolled API to render the combobox value in a custom way.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {3-5}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxValue>
+ *     {(value) => `Current value: ${value}`}
+ *   </ComboboxValue>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare function ComboboxValue({ store, children }?: ComboboxValueProps): ReactNode;
+export interface ComboboxValueProps {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * A function that gets called with the current value as an argument. It can
+     * be used to render the combobox value in a custom way.
+     */
+    children?: (value: ComboboxStoreState["value"]) => ReactNode;
+}

package/cjs/combobox/combobox-value.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.ts";
+/**
+ * Renders the current
+ * [`value`](https://ariakit.org/reference/use-combobox-store#value) state in
+ * the [combobox store](https://ariakit.org/reference/use-combobox-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props.
+ *
+ * It takes a
+ * [`children`](https://ariakit.org/reference/combobox-value#children) function
+ * that gets called with the current value as an argument. This can be used as
+ * an uncontrolled API to render the combobox value in a custom way.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {3-5}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxValue>
+ *     {(value) => `Current value: ${value}`}
+ *   </ComboboxValue>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare function ComboboxValue({ store, children }?: ComboboxValueProps): ReactNode;
+export interface ComboboxValueProps {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * A function that gets called with the current value as an argument. It can
+     * be used to render the combobox value in a custom way.
+     */
+    children?: (value: ComboboxStoreState["value"]) => ReactNode;
+}

package/cjs/combobox/combobox.cjs

@@ -1,26 +1,26 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _YH42XRHRcjs = require('../__chunks/YH42XRHR.cjs');
+var _EO4IBCRNcjs = require('../__chunks/EO4IBCRN.cjs');
 
 
-var _2IJSEADJcjs = require('../__chunks/2IJSEADJ.cjs');
+var _PQYSRG5Dcjs = require('../__chunks/PQYSRG5D.cjs');
 
 
-var _EKW5CERCcjs = require('../__chunks/EKW5CERC.cjs');
+var _7UGWYCZYcjs = require('../__chunks/7UGWYCZY.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
-require('../__chunks/VPI3EKVY.cjs');
-require('../__chunks/NEK2UEJN.cjs');
-require('../__chunks/77BAEZ2Z.cjs');
-require('../__chunks/GDEDCFNU.cjs');
-require('../__chunks/NTNMOEWE.cjs');
-require('../__chunks/FHRIPOYF.cjs');
-require('../__chunks/75KXQZJX.cjs');
+require('../__chunks/5J6PQR7O.cjs');
+require('../__chunks/WKI4JZZH.cjs');
+require('../__chunks/JE2SKI3E.cjs');
+require('../__chunks/ZPVTVHP7.cjs');
+require('../__chunks/WT4MTRKY.cjs');
+require('../__chunks/BJ3OD6EH.cjs');
+require('../__chunks/DYIDES27.cjs');
 
 
 
 
-var _NGD3IQDBcjs = require('../__chunks/NGD3IQDB.cjs');
+var _R2YVMKBRcjs = require('../__chunks/R2YVMKBR.cjs');
 
 
 
@@ -30,8 +30,8 @@ var _NGD3IQDBcjs = require('../__chunks/NGD3IQDB.cjs');
 
 
 
-var _TW3SFX4Ccjs = require('../__chunks/TW3SFX4C.cjs');
-require('../__chunks/CJDHQUBR.cjs');
+var _QFX6UW2Fcjs = require('../__chunks/QFX6UW2F.cjs');
+require('../__chunks/U2WARLXR.cjs');
 
 
 
@@ -44,6 +44,7 @@ var _react = require('react');
 
 
 
+
 var _dom = require('@ariakit/core/utils/dom');
 
 
@@ -54,8 +55,9 @@ var _focus = require('@ariakit/core/utils/focus');
 
 
 
+
 var _misc = require('@ariakit/core/utils/misc');
-var _reactdom = require('react-dom');
+var _store = require('@ariakit/core/utils/store');
 var TagName = "input";
 function isFirstItemAutoSelected(items, activeValue, autoSelect) {
   if (!autoSelect)
@@ -86,14 +88,14 @@ function getDefaultAutoSelectId(items) {
   });
   return item == null ? void 0 : item.id;
 }
-var useCombobox = _NGD3IQDBcjs.createHook.call(void 0, 
+var useCombobox = _R2YVMKBRcjs.createHook.call(void 0, 
   function useCombobox2(_a) {
     var _b = _a, {
       store,
       focusable = true,
       autoSelect: autoSelectProp = false,
       getAutoSelectId,
-      setValueOnChange = true,
+      setValueOnChange,
       showMinLength = 0,
       showOnChange,
       showOnMouseDown,
@@ -121,14 +123,14 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       "moveOnKeyPress",
       "autoComplete"
     ]);
-    const context = _2IJSEADJcjs.useComboboxProviderContext.call(void 0, );
+    const context = _EO4IBCRNcjs.useComboboxProviderContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
       process.env.NODE_ENV !== "production" && "Combobox must receive a `store` prop or be wrapped in a ComboboxProvider component."
     );
     const ref = _react.useRef.call(void 0, null);
-    const [valueUpdated, forceValueUpdate] = _TW3SFX4Ccjs.useForceUpdate.call(void 0, );
+    const [valueUpdated, forceValueUpdate] = _QFX6UW2Fcjs.useForceUpdate.call(void 0, );
     const canAutoSelectRef = _react.useRef.call(void 0, false);
     const composingRef = _react.useRef.call(void 0, false);
     const autoSelect = store.useState(
@@ -136,15 +138,32 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
     );
     const inline = autoComplete === "inline" || autoComplete === "both";
     const [canInline, setCanInline] = _react.useState.call(void 0, inline);
-    _TW3SFX4Ccjs.useUpdateLayoutEffect.call(void 0, () => {
+    _QFX6UW2Fcjs.useUpdateLayoutEffect.call(void 0, () => {
       if (!inline)
         return;
       setCanInline(true);
     }, [inline]);
     const storeValue = store.useState("value");
-    const activeValue = store.useState(
-      (state) => inline && canInline ? state.activeValue : void 0
-    );
+    const prevSelectedValueRef = _react.useRef.call(void 0, );
+    _react.useEffect.call(void 0, () => {
+      return _store.sync.call(void 0, store, ["selectedValue", "activeId"], (_, prev) => {
+        prevSelectedValueRef.current = prev.selectedValue;
+      });
+    }, []);
+    const inlineActiveValue = store.useState((state) => {
+      var _a2;
+      if (!inline)
+        return;
+      if (!canInline)
+        return;
+      if (state.activeValue && Array.isArray(state.selectedValue)) {
+        if (state.selectedValue.includes(state.activeValue))
+          return;
+        if ((_a2 = prevSelectedValueRef.current) == null ? void 0 : _a2.includes(state.activeValue))
+          return;
+      }
+      return state.activeValue;
+    });
     const items = store.useState("renderedItems");
     const open = store.useState("open");
     const contentElement = store.useState("contentElement");
@@ -155,18 +174,18 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
         return storeValue;
       const firstItemAutoSelected = isFirstItemAutoSelected(
         items,
-        activeValue,
+        inlineActiveValue,
         autoSelect
       );
       if (firstItemAutoSelected) {
-        if (hasCompletionString(storeValue, activeValue)) {
-          const slice = (activeValue == null ? void 0 : activeValue.slice(storeValue.length)) || "";
+        if (hasCompletionString(storeValue, inlineActiveValue)) {
+          const slice = (inlineActiveValue == null ? void 0 : inlineActiveValue.slice(storeValue.length)) || "";
           return storeValue + slice;
         }
         return storeValue;
       }
-      return activeValue || storeValue;
-    }, [inline, canInline, items, activeValue, autoSelect, storeValue]);
+      return inlineActiveValue || storeValue;
+    }, [inline, canInline, items, inlineActiveValue, autoSelect, storeValue]);
     _react.useEffect.call(void 0, () => {
       const element = ref.current;
       if (!element)
@@ -182,34 +201,49 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
         return;
       if (!canInline)
         return;
-      if (!activeValue)
+      if (!inlineActiveValue)
         return;
       const firstItemAutoSelected = isFirstItemAutoSelected(
         items,
-        activeValue,
+        inlineActiveValue,
         autoSelect
       );
       if (!firstItemAutoSelected)
         return;
-      if (!hasCompletionString(storeValue, activeValue))
+      if (!hasCompletionString(storeValue, inlineActiveValue))
         return;
+      let cleanup = _misc.noop;
       queueMicrotask(() => {
         const element = ref.current;
         if (!element)
           return;
-        _dom.setSelectionRange.call(void 0, element, storeValue.length, activeValue.length);
+        const { start: prevStart, end: prevEnd } = _dom.getTextboxSelection.call(void 0, element);
+        const nextStart = storeValue.length;
+        const nextEnd = inlineActiveValue.length;
+        _dom.setSelectionRange.call(void 0, element, nextStart, nextEnd);
+        cleanup = () => {
+          if (!_focus.hasFocus.call(void 0, element))
+            return;
+          const { start, end } = _dom.getTextboxSelection.call(void 0, element);
+          if (start !== nextStart)
+            return;
+          if (end !== nextEnd)
+            return;
+          _dom.setSelectionRange.call(void 0, element, prevStart, prevEnd);
+        };
       });
+      return () => cleanup();
     }, [
       valueUpdated,
       inline,
       canInline,
-      activeValue,
+      inlineActiveValue,
       items,
       autoSelect,
       storeValue
     ]);
     const scrollingElementRef = _react.useRef.call(void 0, null);
-    const getAutoSelectIdProp = _TW3SFX4Ccjs.useEvent.call(void 0, getAutoSelectId);
+    const getAutoSelectIdProp = _QFX6UW2Fcjs.useEvent.call(void 0, getAutoSelectId);
     const autoSelectIdRef = _react.useRef.call(void 0, null);
     _react.useEffect.call(void 0, () => {
       if (!open)
@@ -243,20 +277,20 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
         scrollingElement.removeEventListener("scroll", onScroll, true);
       };
     }, [open, contentElement, store]);
-    _TW3SFX4Ccjs.useSafeLayoutEffect.call(void 0, () => {
+    _QFX6UW2Fcjs.useSafeLayoutEffect.call(void 0, () => {
       if (!storeValue)
         return;
       if (composingRef.current)
         return;
       canAutoSelectRef.current = true;
     }, [storeValue]);
-    _TW3SFX4Ccjs.useSafeLayoutEffect.call(void 0, () => {
+    _QFX6UW2Fcjs.useSafeLayoutEffect.call(void 0, () => {
       if (autoSelect !== "always" && open)
         return;
       canAutoSelectRef.current = open;
     }, [autoSelect, open]);
     const resetValueOnSelect = store.useState("resetValueOnSelect");
-    _TW3SFX4Ccjs.useUpdateEffect.call(void 0, () => {
+    _QFX6UW2Fcjs.useUpdateEffect.call(void 0, () => {
       var _a2, _b2;
       const canAutoSelect = canAutoSelectRef.current;
       if (!store)
@@ -314,17 +348,25 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
         elements.forEach((el) => el.removeEventListener("focusout", onBlur2));
       };
     }, [inline, contentElement, store, value]);
-    const canShow = value.length >= showMinLength;
+    const canShow = (event) => {
+      const currentTarget = event.currentTarget;
+      return currentTarget.value.length >= showMinLength;
+    };
     const onChangeProp = props.onChange;
-    const showOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnChange != null ? showOnChange : canShow);
-    const setValueOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, setValueOnChange);
-    const onChange = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+    const showOnChangeProp = _QFX6UW2Fcjs.useBooleanEvent.call(void 0, showOnChange != null ? showOnChange : canShow);
+    const setValueOnChangeProp = _QFX6UW2Fcjs.useBooleanEvent.call(void 0, 
+      // If the combobox is combined with tags, the value will be set by the tag
+      // input component.
+      setValueOnChange != null ? setValueOnChange : !store.tag
+    );
+    const onChange = _QFX6UW2Fcjs.useEvent.call(void 0, (event) => {
       onChangeProp == null ? void 0 : onChangeProp(event);
       if (event.defaultPrevented)
         return;
       if (!store)
         return;
-      const { value: value2, selectionStart, selectionEnd } = event.target;
+      const currentTarget = event.currentTarget;
+      const { value: value2, selectionStart, selectionEnd } = currentTarget;
       const nativeEvent = event.nativeEvent;
       canAutoSelectRef.current = true;
       if (isInputEvent(nativeEvent)) {
@@ -340,8 +382,10 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       }
       if (setValueOnChangeProp(event)) {
         const isSameValue = value2 === store.getState().value;
-        _reactdom.flushSync.call(void 0, () => store == null ? void 0 : store.setValue(value2));
-        _dom.setSelectionRange.call(void 0, event.currentTarget, selectionStart, selectionEnd);
+        store.setValue(value2);
+        queueMicrotask(() => {
+          _dom.setSelectionRange.call(void 0, currentTarget, selectionStart, selectionEnd);
+        });
         if (inline && autoSelect && isSameValue) {
           forceValueUpdate();
         }
@@ -354,7 +398,7 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       }
     });
     const onCompositionEndProp = props.onCompositionEnd;
-    const onCompositionEnd = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+    const onCompositionEnd = _QFX6UW2Fcjs.useEvent.call(void 0, (event) => {
       canAutoSelectRef.current = true;
       composingRef.current = false;
       onCompositionEndProp == null ? void 0 : onCompositionEndProp(event);
@@ -365,12 +409,12 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       forceValueUpdate();
     });
     const onMouseDownProp = props.onMouseDown;
-    const blurActiveItemOnClickProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, 
+    const blurActiveItemOnClickProp = _QFX6UW2Fcjs.useBooleanEvent.call(void 0, 
       blurActiveItemOnClick != null ? blurActiveItemOnClick : () => !!(store == null ? void 0 : store.getState().includesBaseElement)
     );
-    const setValueOnClickProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, setValueOnClick);
-    const showOnClickProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnClick != null ? showOnClick : canShow);
-    const onMouseDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+    const setValueOnClickProp = _QFX6UW2Fcjs.useBooleanEvent.call(void 0, setValueOnClick);
+    const showOnClickProp = _QFX6UW2Fcjs.useBooleanEvent.call(void 0, showOnClick != null ? showOnClick : canShow);
+    const onMouseDown = _QFX6UW2Fcjs.useEvent.call(void 0, (event) => {
       onMouseDownProp == null ? void 0 : onMouseDownProp(event);
       if (event.defaultPrevented)
         return;
@@ -391,8 +435,8 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       }
     });
     const onKeyDownProp = props.onKeyDown;
-    const showOnKeyPressProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, showOnKeyPress != null ? showOnKeyPress : canShow);
-    const onKeyDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+    const showOnKeyPressProp = _QFX6UW2Fcjs.useBooleanEvent.call(void 0, showOnKeyPress != null ? showOnKeyPress : canShow);
+    const onKeyDown = _QFX6UW2Fcjs.useEvent.call(void 0, (event) => {
       onKeyDownProp == null ? void 0 : onKeyDownProp(event);
       if (!event.repeat) {
         canAutoSelectRef.current = false;
@@ -422,13 +466,13 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       }
     });
     const onBlurProp = props.onBlur;
-    const onBlur = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+    const onBlur = _QFX6UW2Fcjs.useEvent.call(void 0, (event) => {
       canAutoSelectRef.current = false;
       onBlurProp == null ? void 0 : onBlurProp(event);
       if (event.defaultPrevented)
         return;
     });
-    const id = _TW3SFX4Ccjs.useId.call(void 0, props.id);
+    const id = _QFX6UW2Fcjs.useId.call(void 0, props.id);
     const ariaAutoComplete = isAriaAutoCompleteValue(autoComplete) ? autoComplete : void 0;
     const isActiveItem = store.useState((state) => state.activeId === null);
     props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
@@ -441,14 +485,14 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
       "data-active-item": isActiveItem || void 0,
       value
     }, props), {
-      ref: _TW3SFX4Ccjs.useMergeRefs.call(void 0, ref, props.ref),
+      ref: _QFX6UW2Fcjs.useMergeRefs.call(void 0, ref, props.ref),
       onChange,
       onCompositionEnd,
       onMouseDown,
       onKeyDown,
       onBlur
     });
-    props = _EKW5CERCcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _7UGWYCZYcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       focusable
     }, props), {
@@ -462,13 +506,13 @@ var useCombobox = _NGD3IQDBcjs.createHook.call(void 0,
         return true;
       }
     }));
-    props = _YH42XRHRcjs.usePopoverAnchor.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    props = _PQYSRG5Dcjs.usePopoverAnchor.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
     return _AV6KTKLEcjs.__spreadValues.call(void 0, { autoComplete: "off" }, props);
   }
 );
-var Combobox = _NGD3IQDBcjs.forwardRef.call(void 0, function Combobox2(props) {
+var Combobox = _R2YVMKBRcjs.forwardRef.call(void 0, function Combobox2(props) {
   const htmlProps = useCombobox(props);
-  return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);
+  return _R2YVMKBRcjs.createElement.call(void 0, TagName, htmlProps);
 });
 
 

package/cjs/combobox/combobox.d.cts

@@ -1,9 +1,9 @@
 import type { AriaAttributes, ChangeEvent, ElementType, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
 import type { BooleanOrCallback, StringWithValue } from "@ariakit/core/utils/types";
-import type { CompositeOptions } from "../composite/composite.js";
-import type { PopoverAnchorOptions } from "../popover/popover-anchor.js";
-import type { Props } from "../utils/types.js";
-import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
+import type { CompositeOptions } from "../composite/composite.tsx";
+import type { PopoverAnchorOptions } from "../popover/popover-anchor.tsx";
+import type { Props } from "../utils/types.ts";
+import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.ts";
 declare const TagName = "input";
 type TagName = typeof TagName;
 /**
@@ -21,7 +21,7 @@ type TagName = typeof TagName;
  * </ComboboxPopover>
  * ```
  */
-export declare const useCombobox: import("../utils/types.js").Hook<"input", ComboboxOptions<"input">>;
+export declare const useCombobox: import("../utils/types.ts").Hook<"input", ComboboxOptions<"input">>;
 /**
  * Renders a combobox input element that can be used to filter a list of items.
  * @see https://ariakit.org/components/combobox

package/cjs/combobox/combobox.d.ts

@@ -1,9 +1,9 @@
 import type { AriaAttributes, ChangeEvent, ElementType, MouseEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
 import type { BooleanOrCallback, StringWithValue } from "@ariakit/core/utils/types";
-import type { CompositeOptions } from "../composite/composite.js";
-import type { PopoverAnchorOptions } from "../popover/popover-anchor.js";
-import type { Props } from "../utils/types.js";
-import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.js";
+import type { CompositeOptions } from "../composite/composite.tsx";
+import type { PopoverAnchorOptions } from "../popover/popover-anchor.tsx";
+import type { Props } from "../utils/types.ts";
+import type { ComboboxStore, ComboboxStoreState } from "./combobox-store.ts";
 declare const TagName = "input";
 type TagName = typeof TagName;
 /**
@@ -21,7 +21,7 @@ type TagName = typeof TagName;
  * </ComboboxPopover>
  * ```
  */
-export declare const useCombobox: import("../utils/types.js").Hook<"input", ComboboxOptions<"input">>;
+export declare const useCombobox: import("../utils/types.ts").Hook<"input", ComboboxOptions<"input">>;
 /**
  * Renders a combobox input element that can be used to filter a list of items.
  * @see https://ariakit.org/components/combobox

package/cjs/command/command.cjs

@@ -2,14 +2,14 @@
 
 
 
-var _U4NXCMZ3cjs = require('../__chunks/U4NXCMZ3.cjs');
-require('../__chunks/FHRIPOYF.cjs');
-require('../__chunks/75KXQZJX.cjs');
-require('../__chunks/NGD3IQDB.cjs');
-require('../__chunks/TW3SFX4C.cjs');
-require('../__chunks/CJDHQUBR.cjs');
+var _ZFDTYFQIcjs = require('../__chunks/ZFDTYFQI.cjs');
+require('../__chunks/BJ3OD6EH.cjs');
+require('../__chunks/DYIDES27.cjs');
+require('../__chunks/R2YVMKBR.cjs');
+require('../__chunks/QFX6UW2F.cjs');
+require('../__chunks/U2WARLXR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Command = _U4NXCMZ3cjs.Command; exports.useCommand = _U4NXCMZ3cjs.useCommand;
+exports.Command = _ZFDTYFQIcjs.Command; exports.useCommand = _ZFDTYFQIcjs.useCommand;

package/cjs/command/command.d.cts

@@ -1,6 +1,6 @@
 import type { ElementType } from "react";
-import type { FocusableOptions } from "../focusable/focusable.js";
-import type { Props } from "../utils/types.js";
+import type { FocusableOptions } from "../focusable/focusable.tsx";
+import type { Props } from "../utils/types.ts";
 declare const TagName = "button";
 type TagName = typeof TagName;
 /**
@@ -14,7 +14,7 @@ type TagName = typeof TagName;
  * <Role {...props}>Accessible button</Role>
  * ```
  */
-export declare const useCommand: import("../utils/types.js").Hook<"button", CommandOptions<"button">>;
+export declare const useCommand: import("../utils/types.ts").Hook<"button", CommandOptions<"button">>;
 /**
  * Renders a clickable element, which is a `button` by default, and inherits
  * features from the [`Focusable`](https://ariakit.org/reference/focusable)

package/cjs/command/command.d.ts

@@ -1,6 +1,6 @@
 import type { ElementType } from "react";
-import type { FocusableOptions } from "../focusable/focusable.js";
-import type { Props } from "../utils/types.js";
+import type { FocusableOptions } from "../focusable/focusable.tsx";
+import type { Props } from "../utils/types.ts";
 declare const TagName = "button";
 type TagName = typeof TagName;
 /**
@@ -14,7 +14,7 @@ type TagName = typeof TagName;
  * <Role {...props}>Accessible button</Role>
  * ```
  */
-export declare const useCommand: import("../utils/types.js").Hook<"button", CommandOptions<"button">>;
+export declare const useCommand: import("../utils/types.ts").Hook<"button", CommandOptions<"button">>;
 /**
  * Renders a clickable element, which is a `button` by default, and inherits
  * features from the [`Focusable`](https://ariakit.org/reference/focusable)

package/cjs/composite/composite-container.cjs

@@ -2,16 +2,16 @@
 
 
 
-var _MJP4XPFZcjs = require('../__chunks/MJP4XPFZ.cjs');
+var _POFUETU3cjs = require('../__chunks/POFUETU3.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
-require('../__chunks/VPI3EKVY.cjs');
-require('../__chunks/NEK2UEJN.cjs');
-require('../__chunks/NGD3IQDB.cjs');
-require('../__chunks/GXMZA6DT.cjs');
-require('../__chunks/TW3SFX4C.cjs');
-require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/5J6PQR7O.cjs');
+require('../__chunks/WKI4JZZH.cjs');
+require('../__chunks/R2YVMKBR.cjs');
+require('../__chunks/IATQHLZT.cjs');
+require('../__chunks/QFX6UW2F.cjs');
+require('../__chunks/U2WARLXR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CompositeContainer = _MJP4XPFZcjs.CompositeContainer; exports.useCompositeContainer = _MJP4XPFZcjs.useCompositeContainer;
+exports.CompositeContainer = _POFUETU3cjs.CompositeContainer; exports.useCompositeContainer = _POFUETU3cjs.useCompositeContainer;

package/cjs/composite/composite-container.d.cts

@@ -1,6 +1,6 @@
 import type { ElementType } from "react";
-import type { Options, Props } from "../utils/types.js";
-import type { CompositeStore } from "./composite-store.js";
+import type { Options, Props } from "../utils/types.ts";
+import type { CompositeStore } from "./composite-store.ts";
 declare const TagName = "div";
 type TagName = typeof TagName;
 /**
@@ -20,7 +20,7 @@ type TagName = typeof TagName;
  * </Composite>
  * ```
  */
-export declare const useCompositeContainer: import("../utils/types.js").Hook<"div", CompositeContainerOptions<"div">>;
+export declare const useCompositeContainer: import("../utils/types.ts").Hook<"div", CompositeContainerOptions<"div">>;
 /**
  * Renders a container for interactive widgets inside composite items. This
  * should be used in conjunction with the

package/cjs/composite/composite-container.d.ts

@@ -1,6 +1,6 @@
 import type { ElementType } from "react";
-import type { Options, Props } from "../utils/types.js";
-import type { CompositeStore } from "./composite-store.js";
+import type { Options, Props } from "../utils/types.ts";
+import type { CompositeStore } from "./composite-store.ts";
 declare const TagName = "div";
 type TagName = typeof TagName;
 /**
@@ -20,7 +20,7 @@ type TagName = typeof TagName;
  * </Composite>
  * ```
  */
-export declare const useCompositeContainer: import("../utils/types.js").Hook<"div", CompositeContainerOptions<"div">>;
+export declare const useCompositeContainer: import("../utils/types.ts").Hook<"div", CompositeContainerOptions<"div">>;
 /**
  * Renders a container for interactive widgets inside composite items. This
  * should be used in conjunction with the