@ariakit/react-core 0.3.3 → 0.3.5

package/cjs/combobox/combobox.cjs

@@ -1,26 +1,26 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _XH2CZ7VFcjs = require('../__chunks/XH2CZ7VF.cjs');
 
+var _PH2Q5GQRcjs = require('../__chunks/PH2Q5GQR.cjs');
 
-var _ZBG4TGVLcjs = require('../__chunks/ZBG4TGVL.cjs');
 
+var _KXLF6YSNcjs = require('../__chunks/KXLF6YSN.cjs');
 
-var _SELCJFCBcjs = require('../__chunks/SELCJFCB.cjs');
-require('../__chunks/KLZID3QO.cjs');
-require('../__chunks/H7R5D2FR.cjs');
-require('../__chunks/NHZBX2RS.cjs');
-require('../__chunks/AKOG5S2T.cjs');
-require('../__chunks/W6ZRSMO5.cjs');
-require('../__chunks/A2NMYLCG.cjs');
-require('../__chunks/GQAB4M3B.cjs');
-require('../__chunks/LHHW5ZQP.cjs');
 
+var _6MOJZWMLcjs = require('../__chunks/6MOJZWML.cjs');
+require('../__chunks/RV3PHHWM.cjs');
+require('../__chunks/FQGSRSYD.cjs');
+require('../__chunks/JVORNAMD.cjs');
+require('../__chunks/KZA6P235.cjs');
+require('../__chunks/QKKT6RXX.cjs');
+require('../__chunks/SMKW5GKS.cjs');
+require('../__chunks/7ARL6QHN.cjs');
+require('../__chunks/75KXQZJX.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
 
+var _VKYTJKYNcjs = require('../__chunks/VKYTJKYN.cjs');
 
 
 
@@ -29,13 +29,14 @@ var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
 
 
 
-var _5WLTMVVQcjs = require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
 
+var _JTVNRMACcjs = require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
 
 
 
-var _72I2GWXFcjs = require('../__chunks/72I2GWXF.cjs');
+
+var _WYXAWBLEcjs = require('../__chunks/WYXAWBLE.cjs');
 
 // src/combobox/combobox.ts
 var _react = require('react');
@@ -50,6 +51,7 @@ var _focus = require('@ariakit/core/utils/focus');
 
 
 var _misc = require('@ariakit/core/utils/misc');
+var _reactdom = require('react-dom');
 function isFirstItemAutoSelected(items, activeValue, autoSelect) {
   if (!autoSelect)
     return false;
@@ -70,7 +72,7 @@ function isInputEvent(event) {
 function isAriaAutoCompleteValue(value) {
   return value === "inline" || value === "list" || value === "both" || value === "none";
 }
-var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0, 
+var useCombobox = _VKYTJKYNcjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, {
       store,
@@ -83,7 +85,7 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       showOnKeyDown = true,
       moveOnKeyPress = true,
       autoComplete = "list"
-    } = _b, props = _72I2GWXFcjs.__objRest.call(void 0, _b, [
+    } = _b, props = _WYXAWBLEcjs.__objRest.call(void 0, _b, [
       "store",
       "focusable",
       "autoSelect",
@@ -95,14 +97,14 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       "moveOnKeyPress",
       "autoComplete"
     ]);
-    const context = _ZBG4TGVLcjs.useComboboxProviderContext.call(void 0, );
+    const context = _KXLF6YSNcjs.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] = _5WLTMVVQcjs.useForceUpdate.call(void 0, );
+    const [valueUpdated, forceValueUpdate] = _JTVNRMACcjs.useForceUpdate.call(void 0, );
     const canAutoSelectRef = _react.useRef.call(void 0, false);
     const composingRef = _react.useRef.call(void 0, false);
     const autoSelect = store.useState(
@@ -110,7 +112,7 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
     );
     const inline = autoComplete === "inline" || autoComplete === "both";
     const [canInline, setCanInline] = _react.useState.call(void 0, inline);
-    _5WLTMVVQcjs.useUpdateLayoutEffect.call(void 0, () => {
+    _JTVNRMACcjs.useUpdateLayoutEffect.call(void 0, () => {
       if (!inline)
         return;
       setCanInline(true);
@@ -213,19 +215,19 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
         scrollingElement.removeEventListener("scroll", onScroll, true);
       };
     }, [open, contentElement, store]);
-    _5WLTMVVQcjs.useSafeLayoutEffect.call(void 0, () => {
+    _JTVNRMACcjs.useSafeLayoutEffect.call(void 0, () => {
       if (!storeValue)
         return;
       if (composingRef.current)
         return;
       canAutoSelectRef.current = true;
     }, [storeValue]);
-    _5WLTMVVQcjs.useSafeLayoutEffect.call(void 0, () => {
+    _JTVNRMACcjs.useSafeLayoutEffect.call(void 0, () => {
       if (open)
         return;
       canAutoSelectRef.current = false;
     }, [open]);
-    _5WLTMVVQcjs.useUpdateEffect.call(void 0, () => {
+    _JTVNRMACcjs.useUpdateEffect.call(void 0, () => {
       var _a2;
       if (!store)
         return;
@@ -244,7 +246,7 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       store.move((_a2 = store.first()) != null ? _a2 : null);
       return;
     }, [store, valueUpdated, storeValue, autoSelect, items]);
-    _5WLTMVVQcjs.useSafeLayoutEffect.call(void 0, () => {
+    _JTVNRMACcjs.useSafeLayoutEffect.call(void 0, () => {
       if (autoSelect)
         return;
       store == null ? void 0 : store.setActiveId(null);
@@ -269,15 +271,15 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       };
     }, [inline, contentElement, store, value]);
     const onChangeProp = props.onChange;
-    const showOnChangeProp = _5WLTMVVQcjs.useBooleanEvent.call(void 0, showOnChange);
-    const setValueOnChangeProp = _5WLTMVVQcjs.useBooleanEvent.call(void 0, setValueOnChange);
-    const onChange = _5WLTMVVQcjs.useEvent.call(void 0, (event) => {
+    const showOnChangeProp = _JTVNRMACcjs.useBooleanEvent.call(void 0, showOnChange);
+    const setValueOnChangeProp = _JTVNRMACcjs.useBooleanEvent.call(void 0, setValueOnChange);
+    const onChange = _JTVNRMACcjs.useEvent.call(void 0, (event) => {
       onChangeProp == null ? void 0 : onChangeProp(event);
       if (event.defaultPrevented)
         return;
       if (!store)
         return;
-      const { value: value2, selectionStart } = event.target;
+      const { value: value2, selectionStart, selectionEnd } = event.target;
       const nativeEvent = event.nativeEvent;
       canAutoSelectRef.current = true;
       if (isInputEvent(nativeEvent)) {
@@ -293,7 +295,8 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       }
       if (setValueOnChangeProp(event)) {
         const isSameValue = value2 === store.getState().value;
-        store.setValue(value2);
+        _reactdom.flushSync.call(void 0, () => store == null ? void 0 : store.setValue(value2));
+        event.currentTarget.setSelectionRange(selectionStart, selectionEnd);
         if (inline && autoSelect && isSameValue) {
           forceValueUpdate();
         }
@@ -306,7 +309,7 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       }
     });
     const onCompositionEndProp = props.onCompositionEnd;
-    const onCompositionEnd = _5WLTMVVQcjs.useEvent.call(void 0, 
+    const onCompositionEnd = _JTVNRMACcjs.useEvent.call(void 0, 
       (event) => {
         canAutoSelectRef.current = true;
         composingRef.current = false;
@@ -319,9 +322,9 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       }
     );
     const onMouseDownProp = props.onMouseDown;
-    const setValueOnClickProp = _5WLTMVVQcjs.useBooleanEvent.call(void 0, setValueOnClick);
-    const showOnMouseDownProp = _5WLTMVVQcjs.useBooleanEvent.call(void 0, showOnMouseDown);
-    const onMouseDown = _5WLTMVVQcjs.useEvent.call(void 0, (event) => {
+    const setValueOnClickProp = _JTVNRMACcjs.useBooleanEvent.call(void 0, setValueOnClick);
+    const showOnMouseDownProp = _JTVNRMACcjs.useBooleanEvent.call(void 0, showOnMouseDown);
+    const onMouseDown = _JTVNRMACcjs.useEvent.call(void 0, (event) => {
       onMouseDownProp == null ? void 0 : onMouseDownProp(event);
       if (event.defaultPrevented)
         return;
@@ -340,8 +343,8 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       }
     });
     const onKeyDownProp = props.onKeyDown;
-    const showOnKeyDownProp = _5WLTMVVQcjs.useBooleanEvent.call(void 0, showOnKeyDown);
-    const onKeyDown = _5WLTMVVQcjs.useEvent.call(void 0, 
+    const showOnKeyDownProp = _JTVNRMACcjs.useBooleanEvent.call(void 0, showOnKeyDown);
+    const onKeyDown = _JTVNRMACcjs.useEvent.call(void 0, 
       (event) => {
         onKeyDownProp == null ? void 0 : onKeyDownProp(event);
         if (event.defaultPrevented)
@@ -370,15 +373,15 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       }
     );
     const onBlurProp = props.onBlur;
-    const onBlur = _5WLTMVVQcjs.useEvent.call(void 0, (event) => {
+    const onBlur = _JTVNRMACcjs.useEvent.call(void 0, (event) => {
       canAutoSelectRef.current = false;
       onBlurProp == null ? void 0 : onBlurProp(event);
       if (event.defaultPrevented)
         return;
     });
-    const id = _5WLTMVVQcjs.useId.call(void 0, props.id);
+    const id = _JTVNRMACcjs.useId.call(void 0, props.id);
     const ariaAutoComplete = isAriaAutoCompleteValue(autoComplete) ? autoComplete : void 0;
-    props = _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
+    props = _WYXAWBLEcjs.__spreadProps.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {
       id,
       role: "combobox",
       "aria-autocomplete": ariaAutoComplete,
@@ -387,14 +390,14 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
       "aria-controls": contentElement == null ? void 0 : contentElement.id,
       value
     }, props), {
-      ref: _5WLTMVVQcjs.useMergeRefs.call(void 0, ref, props.ref),
+      ref: _JTVNRMACcjs.useMergeRefs.call(void 0, ref, props.ref),
       onChange,
       onCompositionEnd,
       onMouseDown,
       onKeyDown,
       onBlur
     });
-    props = _SELCJFCBcjs.useComposite.call(void 0, _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
+    props = _6MOJZWMLcjs.useComposite.call(void 0, _WYXAWBLEcjs.__spreadProps.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {
       store,
       focusable
     }, props), {
@@ -408,13 +411,13 @@ var useCombobox = _Z5PUIG6Acjs.createHook.call(void 0,
         return true;
       }
     }));
-    props = _XH2CZ7VFcjs.usePopoverAnchor.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, { store }, props));
-    return _72I2GWXFcjs.__spreadValues.call(void 0, { autoComplete: "off" }, props);
+    props = _PH2Q5GQRcjs.usePopoverAnchor.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, { store }, props));
+    return _WYXAWBLEcjs.__spreadValues.call(void 0, { autoComplete: "off" }, props);
   }
 );
-var Combobox = _Z5PUIG6Acjs.createComponent.call(void 0, (props) => {
+var Combobox = _VKYTJKYNcjs.createComponent.call(void 0, (props) => {
   const htmlProps = useCombobox(props);
-  return _Z5PUIG6Acjs.createElement.call(void 0, "input", htmlProps);
+  return _VKYTJKYNcjs.createElement.call(void 0, "input", htmlProps);
 });
 if (process.env.NODE_ENV !== "production") {
   Combobox.displayName = "Combobox";

package/cjs/combobox/combobox.d.cts

@@ -0,0 +1,168 @@
+import type { AriaAttributes, ChangeEvent, 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 { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `Combobox` component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useCombobox({ store });
+ * <Role {...props} />
+ * <ComboboxPopover store={store}>
+ *   <ComboboxItem value="Apple" />
+ *   <ComboboxItem value="Banana" />
+ *   <ComboboxItem value="Orange" />
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const useCombobox: import("../utils/types.js").Hook<ComboboxOptions<"input">>;
+/**
+ * Renders a combobox input.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare const Combobox: import("../utils/types.js").Component<ComboboxOptions<"input">>;
+export interface ComboboxOptions<T extends As = "input"> extends CompositeOptions<T>, PopoverAnchorOptions<T> {
+    /**
+     * 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;
+    /**
+     * Whether the first item will be automatically selected when the combobox
+     * input value changes. When it's set to `true`, the exact behavior will
+     * depend on the value of
+     * [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete) prop:
+     * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
+     *   is `both` or `inline`, the first item is automatically focused when the
+     *   popup opens, and the input value changes to reflect this. The inline
+     *   completion string will be highlighted and will have a selected state.
+     * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
+     *   is `list` or `none`, the first item is automatically focused when the
+     *   popup opens, but the input value doesn't change.
+     *
+     * Live examples:
+     * - [ComboboxCancel](https://ariakit.org/examples/combobox-cancel)
+     * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
+     * - [Combobox with links](https://ariakit.org/examples/combobox-links)
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
+     * @default false
+     */
+    autoSelect?: boolean;
+    /**
+     * Whether the items will be filtered based on
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) and
+     * whether the input value will temporarily change based on the active item.
+     *
+     * This prop is based on the standard
+     * [`aria-autocomplete`](https://w3c.github.io/aria/#aria-autocomplete)
+     * attribute, accepting the same values:
+     * - `both`: indicates that the items will be filtered based on
+     *   [`value`](https://ariakit.org/reference/combobox-provider#value) and the
+     *   input value will temporarily change based on the active item. The
+     *   filtering logic must be implemented by the consumer of this component,
+     *   whereas Ariakit will automatically provide the inline autocompletion
+     *   behavior.
+     * - `list` (default): indicates that the items will be filtered based on
+     *   [`value`](https://ariakit.org/reference/combobox-provider#value) and the
+     *   input value will NOT change based on the active item. The filtering logic
+     *   must be implemented by the consumer of this component.
+     * - `inline`: indicates that the items are static, that is, they won't be
+     *   filtered, but the input value will temporarily change based on the active
+     *   item. Ariakit will automatically provide the inline autocompletion
+     *   behavior
+     * - `none`: the items are static and the input value will NOT change based on
+     *   the active item.
+     *
+     * Live examples:
+     * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
+     * @default "list"
+     */
+    autoComplete?: StringWithValue<Required<AriaAttributes>["aria-autocomplete"]>;
+    /**
+     * Whether the combobox list/popover should be shown when the input value is
+     * changed.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * @default true
+     * @example
+     * ```jsx
+     * <Combobox showOnChange={(event) => event.target.value.length > 1} />
+     * ```
+     */
+    showOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+    /**
+     * Whether the combobox store value will be updated when the input value
+     * changes. This is useful if you want to customize how the store value is
+     * updated based on the input value.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * @default true
+     */
+    setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+    /**
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the input is clicked.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * @default true
+     * @example
+     * ```jsx
+     * <Combobox showOnMouseDown={value.length > 1} />
+     * ```
+     */
+    showOnMouseDown?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the user presses the arrow up or down keys
+     * while focusing on the combobox input element.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * @default true
+     * @example
+     * ```jsx
+     * <Combobox showOnKeyDown={value.length > 1} />
+     * ```
+     */
+    showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
+    /**
+     * Whether the combobox store value will be updated when the combobox input
+     * element gets clicked. This usually only applies when `autoComplete` is
+     * `both` or `inline`, because the input value will temporarily change based
+     * on the active item and the store value will not be updated until the user
+     * confirms the selection.
+     * @default true
+     */
+    setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+}
+export type ComboboxProps<T extends As = "input"> = Props<ComboboxOptions<T>>;

package/cjs/command/command.cjs

@@ -1,14 +1,15 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _FXRXBA2Ycjs = require('../__chunks/FXRXBA2Y.cjs');
-require('../__chunks/GQAB4M3B.cjs');
-require('../__chunks/LHHW5ZQP.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _F7HB6RYGcjs = require('../__chunks/F7HB6RYG.cjs');
+require('../__chunks/7ARL6QHN.cjs');
+require('../__chunks/75KXQZJX.cjs');
+require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
 
 
-exports.Command = _FXRXBA2Ycjs.Command; exports.useCommand = _FXRXBA2Ycjs.useCommand;
+
+exports.Command = _F7HB6RYGcjs.Command; exports.useCommand = _F7HB6RYGcjs.useCommand;

package/cjs/command/command.d.cts

@@ -0,0 +1,51 @@
+import type { FocusableOptions } from "../focusable/focusable.js";
+import type { As, Props } from "../utils/types.js";
+/**
+ * Returns props to create a `Command` component. If the element is not a native
+ * clickable element (like a button), this hook will return additional props to
+ * make sure it's accessible.
+ * @see https://ariakit.org/components/command
+ * @example
+ * ```jsx
+ * const props = useCommand({ render: <div /> });
+ * <Role {...props}>Accessible button</Role>
+ * ```
+ */
+export declare const useCommand: import("../utils/types.js").Hook<CommandOptions<"button">>;
+/**
+ * Renders a clickable element, which is a `button` by default, and inherits
+ * features from the [`Focusable`](https://ariakit.org/reference/focusable)
+ * component.
+ *
+ * If the base element isn't a native clickable one, this component will provide
+ * extra attributes and event handlers to ensure accessibility. It can be
+ * activated with the keyboard using the
+ * [`clickOnEnter`](https://ariakit.org/reference/command#clickonenter) and
+ * [`clickOnSpace`](https://ariakit.org/reference/command#clickonspace)
+ * props. Both are set to `true` by default.
+ * @see https://ariakit.org/components/command
+ * @example
+ * ```jsx
+ * <Command render={<div />}>Accessible button</Command>
+ * ```
+ */
+export declare const Command: import("../utils/types.js").Component<CommandOptions<"button">>;
+export interface CommandOptions<T extends As = "button"> extends FocusableOptions<T> {
+    /**
+     * If set to `true`, pressing the enter key while this element is focused will
+     * trigger a click on the element, regardless of whether it's a native button
+     * or not. If this prop is set to `false`, pressing enter will not initiate a
+     * click.
+     * @default true
+     */
+    clickOnEnter?: boolean;
+    /**
+     * If set to `true`, pressing and releasing the space key while this element
+     * is focused will trigger a click on the element, regardless of whether it's
+     * a native button or not. If this prop is set to `false`, space will not
+     * initiate a click.
+     * @default true
+     */
+    clickOnSpace?: boolean;
+}
+export type CommandProps<T extends As = "button"> = Props<CommandOptions<T>>;

package/cjs/composite/composite-container.cjs

@@ -1,16 +1,17 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _ZKEGT5BQcjs = require('../__chunks/ZKEGT5BQ.cjs');
-require('../__chunks/KLZID3QO.cjs');
-require('../__chunks/H7R5D2FR.cjs');
-require('../__chunks/NHZBX2RS.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/UHRHLHM2.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _JLZMDZGEcjs = require('../__chunks/JLZMDZGE.cjs');
+require('../__chunks/RV3PHHWM.cjs');
+require('../__chunks/FQGSRSYD.cjs');
+require('../__chunks/JVORNAMD.cjs');
+require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/WLJVTO7A.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
 
 
-exports.CompositeContainer = _ZKEGT5BQcjs.CompositeContainer; exports.useCompositeContainer = _ZKEGT5BQcjs.useCompositeContainer;
+
+exports.CompositeContainer = _JLZMDZGEcjs.CompositeContainer; exports.useCompositeContainer = _JLZMDZGEcjs.useCompositeContainer;

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

@@ -0,0 +1,44 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { CompositeStore } from "./composite-store.js";
+/**
+ * Returns props to create a `CompositeContainer` component. This component
+ * renders interactive widgets inside composite items. This should be used in
+ * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,
+ * or any other component/hook that uses `CompositeItem` underneath.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeContainer({ store });
+ * <Composite store={store}>
+ *   <CompositeItem {...props}>
+ *     <input type="text" />
+ *   </CompositeItem>
+ * </Composite>
+ * ```
+ */
+export declare const useCompositeContainer: import("../utils/types.js").Hook<CompositeContainerOptions<"div">>;
+/**
+ * Renders a container for interactive widgets inside composite items. This
+ * should be used in conjunction with the `CompositeItem` component or a
+ * component that uses `CompositeItem` underneath.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * <Composite store={composite}>
+ *   <CompositeItem render={<CompositeContainer />}>
+ *     <input type="text" />
+ *   </CompositeItem>
+ * </Composite>
+ * ```
+ */
+export declare const CompositeContainer: import("../utils/types.js").Component<CompositeContainerOptions<"div">>;
+export interface CompositeContainerOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * Object returned by the `useCompositeStore` hook. If not provided, the
+     * parent `Composite` component's context will be used.
+     */
+    store?: CompositeStore;
+}
+export type CompositeContainerProps<T extends As = "div"> = Props<CompositeContainerOptions<T>>;

package/cjs/composite/composite-context.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
 
@@ -6,13 +6,13 @@
 
 
 
-var _H7R5D2FRcjs = require('../__chunks/H7R5D2FR.cjs');
-require('../__chunks/NHZBX2RS.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _FQGSRSYDcjs = require('../__chunks/FQGSRSYD.cjs');
+require('../__chunks/JVORNAMD.cjs');
+require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
 
 
 
@@ -20,4 +20,5 @@ require('../__chunks/72I2GWXF.cjs');
 
 
 
-exports.CompositeContextProvider = _H7R5D2FRcjs.CompositeContextProvider; exports.CompositeItemContext = _H7R5D2FRcjs.CompositeItemContext; exports.CompositeRowContext = _H7R5D2FRcjs.CompositeRowContext; exports.CompositeScopedContextProvider = _H7R5D2FRcjs.CompositeScopedContextProvider; exports.useCompositeContext = _H7R5D2FRcjs.useCompositeContext; exports.useCompositeProviderContext = _H7R5D2FRcjs.useCompositeProviderContext; exports.useCompositeScopedContext = _H7R5D2FRcjs.useCompositeScopedContext;
+
+exports.CompositeContextProvider = _FQGSRSYDcjs.CompositeContextProvider; exports.CompositeItemContext = _FQGSRSYDcjs.CompositeItemContext; exports.CompositeRowContext = _FQGSRSYDcjs.CompositeRowContext; exports.CompositeScopedContextProvider = _FQGSRSYDcjs.CompositeScopedContextProvider; exports.useCompositeContext = _FQGSRSYDcjs.useCompositeContext; exports.useCompositeProviderContext = _FQGSRSYDcjs.useCompositeProviderContext; exports.useCompositeScopedContext = _FQGSRSYDcjs.useCompositeScopedContext;

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

@@ -0,0 +1,30 @@
+import type { CompositeStore } from "./composite-store.js";
+/**
+ * Returns the composite store from the nearest composite container.
+ * @example
+ * function CompositeItem() {
+ *   const store = useCompositeContext();
+ *
+ *   if (!store) {
+ *     throw new Error("CompositeItem must be wrapped in CompositeProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export declare const useCompositeContext: () => CompositeStore | undefined;
+export declare const useCompositeScopedContext: (onlyScoped?: boolean) => CompositeStore | undefined;
+export declare const useCompositeProviderContext: () => CompositeStore | undefined;
+export declare const CompositeContextProvider: (props: import("react").ProviderProps<CompositeStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const CompositeScopedContextProvider: (props: import("react").ProviderProps<CompositeStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+interface ItemContext {
+    baseElement?: HTMLElement;
+    id?: string;
+}
+export declare const CompositeItemContext: import("react").Context<ItemContext | undefined>;
+interface RowContext extends ItemContext {
+    ariaSetSize?: number;
+    ariaPosInSet?: number;
+}
+export declare const CompositeRowContext: import("react").Context<RowContext | undefined>;
+export {};

package/cjs/composite/composite-group-label.cjs

@@ -1,14 +1,15 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _DGL5AMAWcjs = require('../__chunks/DGL5AMAW.cjs');
-require('../__chunks/TDUVWW2F.cjs');
-require('../__chunks/K56WQU76.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _NKMUYKJAcjs = require('../__chunks/NKMUYKJA.cjs');
+require('../__chunks/VZI5MZ7D.cjs');
+require('../__chunks/FE3YCURH.cjs');
+require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
 
 
-exports.CompositeGroupLabel = _DGL5AMAWcjs.CompositeGroupLabel; exports.useCompositeGroupLabel = _DGL5AMAWcjs.useCompositeGroupLabel;
+
+exports.CompositeGroupLabel = _NKMUYKJAcjs.CompositeGroupLabel; exports.useCompositeGroupLabel = _NKMUYKJAcjs.useCompositeGroupLabel;