@ariakit/react-core 0.4.3 → 0.4.5

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

@@ -7,16 +7,17 @@ type Value = SelectStoreValue;
  * [`value`](https://ariakit.org/reference/use-select-store#value) state in the
  * [select store](https://ariakit.org/reference/use-select-store).
  *
- * As a headless value component, it doesn't render any DOM elements and
- * therefore doesn't accept HTML props. It can optionally accept a
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props. It can optionally accept a
  * [`fallback`](https://ariakit.org/reference/select-value#fallback) prop to use
  * as a default value if the store's
  * [`value`](https://ariakit.org/reference/use-select-store#value) is
  * `undefined`.
  *
- * Additionally, it takes a `children` function that gets called with the
- * current value as an argument. This feature is handy for renderind the value
- * in a custom way.
+ * Additionally, it takes a
+ * [`children`](https://ariakit.org/reference/select-value#children) function
+ * that gets called with the current value as an argument. This is handy for
+ * rendering the value in a custom way.
  * @see https://ariakit.org/components/select
  * @example
  * ```jsx {3}
@@ -71,8 +72,8 @@ export interface SelectValueProps<T extends Value = Value> {
      */
     fallback?: T;
     /**
-     * A function that gets called with the current value as an argument. This
-     * feature is handy for renderind the value in a custom way.
+     * A function that gets called with the current value as an argument. This is
+     * handy for rendering the value in a custom way.
      */
     children?: (value: ToPrimitive<T>) => ReactNode;
 }

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

@@ -7,16 +7,17 @@ type Value = SelectStoreValue;
  * [`value`](https://ariakit.org/reference/use-select-store#value) state in the
  * [select store](https://ariakit.org/reference/use-select-store).
  *
- * As a headless value component, it doesn't render any DOM elements and
- * therefore doesn't accept HTML props. It can optionally accept a
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props. It can optionally accept a
  * [`fallback`](https://ariakit.org/reference/select-value#fallback) prop to use
  * as a default value if the store's
  * [`value`](https://ariakit.org/reference/use-select-store#value) is
  * `undefined`.
  *
- * Additionally, it takes a `children` function that gets called with the
- * current value as an argument. This feature is handy for renderind the value
- * in a custom way.
+ * Additionally, it takes a
+ * [`children`](https://ariakit.org/reference/select-value#children) function
+ * that gets called with the current value as an argument. This is handy for
+ * rendering the value in a custom way.
  * @see https://ariakit.org/components/select
  * @example
  * ```jsx {3}
@@ -71,8 +72,8 @@ export interface SelectValueProps<T extends Value = Value> {
      */
     fallback?: T;
     /**
-     * A function that gets called with the current value as an argument. This
-     * feature is handy for renderind the value in a custom way.
+     * A function that gets called with the current value as an argument. This is
+     * handy for rendering the value in a custom way.
      */
     children?: (value: ToPrimitive<T>) => ReactNode;
 }

package/cjs/select/select.cjs

@@ -8,16 +8,16 @@ require('../__chunks/YH42XRHR.cjs');
 require('../__chunks/IXJIFLOA.cjs');
 
 
-var _NZSB7HSZcjs = require('../__chunks/NZSB7HSZ.cjs');
-require('../__chunks/3C4RFBCG.cjs');
+var _LY4LCJM6cjs = require('../__chunks/LY4LCJM6.cjs');
+require('../__chunks/EYZZO5IT.cjs');
 
 
 var _4LPJTV22cjs = require('../__chunks/4LPJTV22.cjs');
-require('../__chunks/U4NXCMZ3.cjs');
 
 
 
 var _HZDOLHROcjs = require('../__chunks/HZDOLHRO.cjs');
+require('../__chunks/U4NXCMZ3.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
 require('../__chunks/VPI3EKVY.cjs');
 require('../__chunks/NEK2UEJN.cjs');
@@ -267,7 +267,7 @@ var useSelect = _NGD3IQDBcjs.createHook.call(void 0, function useSelect2(_a) {
   );
   const children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     value,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _NZSB7HSZcjs.SelectArrow, {})
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _LY4LCJM6cjs.SelectArrow, {})
   ] });
   const contentElement = store.useState("contentElement");
   props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {

package/cjs/tab/tab-panel.cjs

@@ -1,11 +1,11 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _HD5AHCRIcjs = require('../__chunks/HD5AHCRI.cjs');
 
+var _5CAFC273cjs = require('../__chunks/5CAFC273.cjs');
 
 
-var _5CAFC273cjs = require('../__chunks/5CAFC273.cjs');
+var _HD5AHCRIcjs = require('../__chunks/HD5AHCRI.cjs');
 require('../__chunks/VPI3EKVY.cjs');
 require('../__chunks/NEK2UEJN.cjs');
 

package/cjs/tab/tab.cjs

@@ -1,13 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
+var _5CAFC273cjs = require('../__chunks/5CAFC273.cjs');
 
-var _7DQ2LBH2cjs = require('../__chunks/7DQ2LBH2.cjs');
-require('../__chunks/U4NXCMZ3.cjs');
-require('../__chunks/HD5AHCRI.cjs');
 
 
-var _5CAFC273cjs = require('../__chunks/5CAFC273.cjs');
+var _3HMQOCLFcjs = require('../__chunks/3HMQOCLF.cjs');
+require('../__chunks/HD5AHCRI.cjs');
+require('../__chunks/U4NXCMZ3.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
 require('../__chunks/VPI3EKVY.cjs');
 require('../__chunks/NEK2UEJN.cjs');
@@ -93,9 +93,9 @@ var useTab = _NGD3IQDBcjs.createHook.call(void 0, function useTab2(_a) {
         render: element
       };
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _7DQ2LBH2cjs.CompositeItem,
+        _3HMQOCLFcjs.CompositeItem,
         _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, defaultProps), {
-          render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _7DQ2LBH2cjs.CompositeItem, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, defaultProps), { store: store.combobox })) : element
+          render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3HMQOCLFcjs.CompositeItem, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, defaultProps), { store: store.combobox })) : element
         })
       );
     },
@@ -109,7 +109,7 @@ var useTab = _NGD3IQDBcjs.createHook.call(void 0, function useTab2(_a) {
   }, props), {
     onClick
   });
-  props = _7DQ2LBH2cjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+  props = _3HMQOCLFcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
     store
   }, props), {
     accessibleWhenDisabled,

package/cjs/tag/tag-context.cjs

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+
+
+
+
+var _PVLZGFP6cjs = require('../__chunks/PVLZGFP6.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/TW3SFX4C.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+require('../__chunks/AV6KTKLE.cjs');
+
+
+
+
+
+
+
+
+exports.TagContextProvider = _PVLZGFP6cjs.TagContextProvider; exports.TagRemoveIdContext = _PVLZGFP6cjs.TagRemoveIdContext; exports.TagScopedContextProvider = _PVLZGFP6cjs.TagScopedContextProvider; exports.TagValueContext = _PVLZGFP6cjs.TagValueContext; exports.useTagContext = _PVLZGFP6cjs.useTagContext; exports.useTagProviderContext = _PVLZGFP6cjs.useTagProviderContext; exports.useTagScopedContext = _PVLZGFP6cjs.useTagScopedContext;

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

@@ -0,0 +1,21 @@
+import type { TagStore } from "./tag-store.js";
+export declare const TagValueContext: import("react").Context<string | null>;
+export declare const TagRemoveIdContext: import("react").Context<((id?: string) => void) | null>;
+/**
+ * Returns the tag store from the nearest tag container.
+ * @example
+ * function Tag() {
+ *   const store = useTagContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Tag must be wrapped in TagProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export declare const useTagContext: () => TagStore | undefined;
+export declare const useTagScopedContext: (onlyScoped?: boolean) => TagStore | undefined;
+export declare const useTagProviderContext: () => TagStore | undefined;
+export declare const TagContextProvider: (props: import("react").ProviderProps<TagStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const TagScopedContextProvider: (props: import("react").ProviderProps<TagStore | undefined>) => import("react/jsx-runtime").JSX.Element;

package/cjs/tag/tag-context.d.ts

@@ -0,0 +1,21 @@
+import type { TagStore } from "./tag-store.js";
+export declare const TagValueContext: import("react").Context<string | null>;
+export declare const TagRemoveIdContext: import("react").Context<((id?: string) => void) | null>;
+/**
+ * Returns the tag store from the nearest tag container.
+ * @example
+ * function Tag() {
+ *   const store = useTagContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Tag must be wrapped in TagProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+export declare const useTagContext: () => TagStore | undefined;
+export declare const useTagScopedContext: (onlyScoped?: boolean) => TagStore | undefined;
+export declare const useTagProviderContext: () => TagStore | undefined;
+export declare const TagContextProvider: (props: import("react").ProviderProps<TagStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+export declare const TagScopedContextProvider: (props: import("react").ProviderProps<TagStore | undefined>) => import("react/jsx-runtime").JSX.Element;

package/cjs/tag/tag-input.cjs

@@ -0,0 +1,191 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _3HMQOCLFcjs = require('../__chunks/3HMQOCLF.cjs');
+require('../__chunks/HD5AHCRI.cjs');
+require('../__chunks/U4NXCMZ3.cjs');
+
+
+var _PVLZGFP6cjs = require('../__chunks/PVLZGFP6.cjs');
+require('../__chunks/6ZZYUFPW.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+require('../__chunks/FHRIPOYF.cjs');
+require('../__chunks/75KXQZJX.cjs');
+
+
+
+
+var _NGD3IQDBcjs = require('../__chunks/NGD3IQDB.cjs');
+require('../__chunks/GXMZA6DT.cjs');
+
+
+
+
+var _TW3SFX4Ccjs = require('../__chunks/TW3SFX4C.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+
+
+
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
+
+// src/tag/tag-input.tsx
+var _array = require('@ariakit/core/utils/array');
+
+
+
+var _dom = require('@ariakit/core/utils/dom');
+var _events = require('@ariakit/core/utils/events');
+var _misc = require('@ariakit/core/utils/misc');
+var _undo = require('@ariakit/core/utils/undo');
+var TagName = "input";
+var DEFAULT_DELIMITER = ["\n", ";", ",", /\s/];
+function getDelimiters(delimiter, defaultDelimiter = DEFAULT_DELIMITER) {
+  const finalDelimiter = delimiter === void 0 ? defaultDelimiter : delimiter;
+  if (!finalDelimiter)
+    return [];
+  return _array.toArray.call(void 0, finalDelimiter);
+}
+function splitValueByDelimiter(value, delimiters) {
+  for (const delimiter of delimiters) {
+    let match = value.match(delimiter);
+    while ((match == null ? void 0 : match.index) === 0) {
+      value = value.slice(match[0].length);
+      match = value.match(delimiter);
+    }
+    if (!match)
+      continue;
+    return value.split(delimiter);
+  }
+  return [];
+}
+var useTagInput = _NGD3IQDBcjs.createHook.call(void 0, 
+  function useTagInput2(_a) {
+    var _b = _a, {
+      store,
+      tabbable = true,
+      delimiter,
+      addValueOnPaste = true,
+      addValueOnChange = true,
+      setValueOnChange = true,
+      removeOnBackspace = true
+    } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
+      "store",
+      "tabbable",
+      "delimiter",
+      "addValueOnPaste",
+      "addValueOnChange",
+      "setValueOnChange",
+      "removeOnBackspace"
+    ]);
+    const context = _PVLZGFP6cjs.useTagContext.call(void 0, );
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "TagInput must receive a `store` prop or be wrapped in a TagProvider component."
+    );
+    const value = store.useState("value");
+    const onPasteProp = props.onPaste;
+    const addValueOnPasteProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, addValueOnPaste);
+    const onPaste = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+      onPasteProp == null ? void 0 : onPasteProp(event);
+      if (event.defaultPrevented)
+        return;
+      const text = event.clipboardData.getData("text");
+      const delimiters = getDelimiters(delimiter);
+      const values = splitValueByDelimiter(text, delimiters).map((value2) => value2.trim()).filter((value2) => value2 !== "");
+      const eventWithValues = Object.assign(event, { values });
+      if (!addValueOnPasteProp(eventWithValues))
+        return;
+      if (!values.length)
+        return;
+      event.preventDefault();
+      for (const tagValue of values) {
+        store.addValue(tagValue);
+      }
+    });
+    const onChangeProp = props.onChange;
+    const setValueOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, setValueOnChange);
+    const addValueOnChangeProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, addValueOnChange);
+    const onChange = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+      onChangeProp == null ? void 0 : onChangeProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (!store)
+        return;
+      const { value: prevValue } = store.getState();
+      const inputType = _events.getInputType.call(void 0, event);
+      const currentTarget = event.currentTarget;
+      const { start, end } = _dom.getTextboxSelection.call(void 0, currentTarget);
+      const { value: value2 } = currentTarget;
+      if (setValueOnChangeProp(event)) {
+        _undo.UndoManager.execute(() => {
+          store.setValue(value2);
+          queueMicrotask(() => {
+            _dom.setSelectionRange.call(void 0, currentTarget, start, end);
+          });
+          if (value2 === prevValue)
+            return;
+          return () => store.setValue(prevValue);
+        }, inputType);
+      }
+      const isTrailingCaret = start === end && start === value2.length;
+      if (isTrailingCaret) {
+        const delimiters = getDelimiters(delimiter);
+        let values = splitValueByDelimiter(value2, delimiters);
+        const trailingvalue = values.pop() || "";
+        values = values.map((value3) => value3.trim()).filter((value3) => value3 !== "");
+        const eventWithValues = Object.assign(event, { values });
+        if (values.length && addValueOnChangeProp(eventWithValues)) {
+          event.preventDefault();
+          for (const tagValue of values) {
+            store.addValue(tagValue);
+          }
+          _undo.UndoManager.execute(() => {
+            store.setValue(trailingvalue);
+            if (trailingvalue === prevValue)
+              return;
+            return () => store.setValue(prevValue);
+          }, inputType);
+        }
+      }
+    });
+    const onKeyDownProp = props.onKeyDown;
+    const removeOnBackspaceProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, removeOnBackspace);
+    const onKeyDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (event.key === "Backspace" && removeOnBackspaceProp(event)) {
+        const { start, end } = _dom.getTextboxSelection.call(void 0, event.currentTarget);
+        const isLeadingCaret = start === end && start === 0;
+        if (!isLeadingCaret)
+          return;
+        store.setValues((values) => {
+          if (!values.length)
+            return values;
+          return values.slice(0, -1);
+        });
+      }
+    });
+    props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+      value
+    }, props), {
+      ref: _TW3SFX4Ccjs.useMergeRefs.call(void 0, store.setInputElement, props.ref),
+      onPaste,
+      onChange,
+      onKeyDown
+    });
+    props = _3HMQOCLFcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store, tabbable }, props));
+    return props;
+  }
+);
+var TagInput = _NGD3IQDBcjs.forwardRef.call(void 0, function TagInput2(props) {
+  const htmlProps = useTagInput(props);
+  return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);
+});
+
+
+
+exports.TagInput = TagInput; exports.useTagInput = useTagInput;

package/cjs/tag/tag-input.d.cts

@@ -0,0 +1,122 @@
+import type { ChangeEvent, ClipboardEvent, ElementType, KeyboardEvent, SyntheticEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { CompositeItemOptions } from "../composite/composite-item.js";
+import type { Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
+type EventWithValues<T extends SyntheticEvent> = T & {
+    values: string[];
+};
+/**
+ * Returns props to create a `TagInput` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagInput();
+ * <Role.input {...props} />
+ * ```
+ */
+export declare const useTagInput: import("../utils/types.js").Hook<"input", TagInputOptions<"input">>;
+/**
+ * Renders an input element within a
+ * [`TagList`](https://ariakit.org/reference/tag-list) component. This component
+ * lets users input tag values that are added to the store when the input value
+ * changes or when the user pastes text into the input element, based on the
+ * [`delimiter`](https://ariakit.org/reference/tag-input#delimiter) prop.
+ *
+ * This component can be combined with a
+ * [`Combobox`](https://ariakit.org/reference/combobox) component using the
+ * [`render`](https://ariakit.org/reference/tag-input#render) prop to create a
+ * tag input with suggestions.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {14}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare const TagInput: (props: TagInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagInputOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider) component's
+     * context will be used.
+     */
+    store?: TagStore;
+    /**
+     * The string or pattern employed to break the input value into multiple tags.
+     * This could be a string, a regular expression, an array of strings and
+     * regular expressions, or `null` to prevent splitting on input.
+     *
+     * When an array is given, the input value is split by the first matching
+     * delimiter. All other delimiters are disregarded for the same input event.
+     * For example, if the delimiters are `["\n", ","]` and the user pastes text
+     * containing commas and newlines, the text will be split solely by newlines.
+     * The commas will be preserved in the tag values. If you want to split by
+     * both commas and newlines, you should use a regular expression that matches
+     * both characters (e.g., `/[\n,]/`).
+     * @default ["\n", ";", ",", /\s/]
+     */
+    delimiter?: string | RegExp | null | (string | RegExp)[];
+    /**
+     * Determines if tag values should be added to the store when the input value
+     * is pasted. The values are extracted from the clipboard text and
+     * automatically processed with the
+     * [`delimiter`](https://ariakit.org/reference/tag-input#delimiter) prop.
+     *
+     * This can be either a boolean or a callback that receives an event with an
+     * extra `values` property and should return a boolean.
+     * @default true
+     */
+    addValueOnPaste?: BooleanOrCallback<EventWithValues<ClipboardEvent<HTMLElement>>>;
+    /**
+     * Determines if the tag value should be added to the store when the input
+     * value changes. The tag value is automatically processed with the
+     * [`delimiter`](https://ariakit.org/reference/tag-input#delimiter) prop.
+     *
+     * This can be either a boolean or a callback that receives an event with an
+     * extra `values` property and should return a boolean.
+     * @default true
+     */
+    addValueOnChange?: BooleanOrCallback<EventWithValues<ChangeEvent<HTMLElement>>>;
+    /**
+     * Whether the tag
+     * [`value`](https://ariakit.org/reference/tag-provider#value) state
+     * should be updated when the input value changes. This is useful if you want
+     * to customize how the store
+     * [`value`](https://ariakit.org/reference/tag-provider#value) is updated
+     * based on the input element's value.
+     * @default true
+     */
+    setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+    /**
+     * Determines whether the last tag value should be removed from the store when
+     * the `Backspace` key is pressed and the cursor is at the start of the input
+     * value.
+     * @default true
+     */
+    removeOnBackspace?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+    /**
+     * @default true
+     */
+    tabbable?: CompositeItemOptions<T>["tabbable"];
+}
+export type TagInputProps<T extends ElementType = TagName> = Props<T, TagInputOptions<T>>;
+export {};

package/cjs/tag/tag-input.d.ts

@@ -0,0 +1,122 @@
+import type { ChangeEvent, ClipboardEvent, ElementType, KeyboardEvent, SyntheticEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { CompositeItemOptions } from "../composite/composite-item.js";
+import type { Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
+type EventWithValues<T extends SyntheticEvent> = T & {
+    values: string[];
+};
+/**
+ * Returns props to create a `TagInput` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagInput();
+ * <Role.input {...props} />
+ * ```
+ */
+export declare const useTagInput: import("../utils/types.js").Hook<"input", TagInputOptions<"input">>;
+/**
+ * Renders an input element within a
+ * [`TagList`](https://ariakit.org/reference/tag-list) component. This component
+ * lets users input tag values that are added to the store when the input value
+ * changes or when the user pastes text into the input element, based on the
+ * [`delimiter`](https://ariakit.org/reference/tag-input#delimiter) prop.
+ *
+ * This component can be combined with a
+ * [`Combobox`](https://ariakit.org/reference/combobox) component using the
+ * [`render`](https://ariakit.org/reference/tag-input#render) prop to create a
+ * tag input with suggestions.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {14}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare const TagInput: (props: TagInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagInputOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
+    /**
+     * Object returned by the
+     * [`useTagStore`](https://ariakit.org/reference/use-tag-store) hook. If not
+     * provided, the closest
+     * [`TagProvider`](https://ariakit.org/reference/tag-provider) component's
+     * context will be used.
+     */
+    store?: TagStore;
+    /**
+     * The string or pattern employed to break the input value into multiple tags.
+     * This could be a string, a regular expression, an array of strings and
+     * regular expressions, or `null` to prevent splitting on input.
+     *
+     * When an array is given, the input value is split by the first matching
+     * delimiter. All other delimiters are disregarded for the same input event.
+     * For example, if the delimiters are `["\n", ","]` and the user pastes text
+     * containing commas and newlines, the text will be split solely by newlines.
+     * The commas will be preserved in the tag values. If you want to split by
+     * both commas and newlines, you should use a regular expression that matches
+     * both characters (e.g., `/[\n,]/`).
+     * @default ["\n", ";", ",", /\s/]
+     */
+    delimiter?: string | RegExp | null | (string | RegExp)[];
+    /**
+     * Determines if tag values should be added to the store when the input value
+     * is pasted. The values are extracted from the clipboard text and
+     * automatically processed with the
+     * [`delimiter`](https://ariakit.org/reference/tag-input#delimiter) prop.
+     *
+     * This can be either a boolean or a callback that receives an event with an
+     * extra `values` property and should return a boolean.
+     * @default true
+     */
+    addValueOnPaste?: BooleanOrCallback<EventWithValues<ClipboardEvent<HTMLElement>>>;
+    /**
+     * Determines if the tag value should be added to the store when the input
+     * value changes. The tag value is automatically processed with the
+     * [`delimiter`](https://ariakit.org/reference/tag-input#delimiter) prop.
+     *
+     * This can be either a boolean or a callback that receives an event with an
+     * extra `values` property and should return a boolean.
+     * @default true
+     */
+    addValueOnChange?: BooleanOrCallback<EventWithValues<ChangeEvent<HTMLElement>>>;
+    /**
+     * Whether the tag
+     * [`value`](https://ariakit.org/reference/tag-provider#value) state
+     * should be updated when the input value changes. This is useful if you want
+     * to customize how the store
+     * [`value`](https://ariakit.org/reference/tag-provider#value) is updated
+     * based on the input element's value.
+     * @default true
+     */
+    setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
+    /**
+     * Determines whether the last tag value should be removed from the store when
+     * the `Backspace` key is pressed and the cursor is at the start of the input
+     * value.
+     * @default true
+     */
+    removeOnBackspace?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+    /**
+     * @default true
+     */
+    tabbable?: CompositeItemOptions<T>["tabbable"];
+}
+export type TagInputProps<T extends ElementType = TagName> = Props<T, TagInputOptions<T>>;
+export {};