@ariakit/react-core 0.4.4 → 0.4.5

package/cjs/tag/tag-list-label.d.cts

@@ -0,0 +1,55 @@
+import type { ElementType } from "react";
+import type { CompositeOptions } from "../composite/composite.jsx";
+import type { Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "label";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `TagListLabel` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagListLabel();
+ * <Role.label {...props} />
+ * ```
+ */
+export declare const useTagListLabel: import("../utils/types.js").Hook<"label", TagListLabelOptions<"label">>;
+/**
+ * Renders a label element for the
+ * [`TagInput`](https://ariakit.org/reference/tag-input) and also acts as the
+ * accessible name for the listbox element rendered by
+ * [`TagList`](https://ariakit.org/reference/tag-list).
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {2}
+ * <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 TagListLabel: (props: TagListLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagListLabelOptions<T extends ElementType = TagName> extends CompositeOptions<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;
+}
+export type TagListLabelProps<T extends ElementType = TagName> = Props<T, TagListLabelOptions<T>>;
+export {};

package/cjs/tag/tag-list-label.d.ts

@@ -0,0 +1,55 @@
+import type { ElementType } from "react";
+import type { CompositeOptions } from "../composite/composite.jsx";
+import type { Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "label";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `TagListLabel` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagListLabel();
+ * <Role.label {...props} />
+ * ```
+ */
+export declare const useTagListLabel: import("../utils/types.js").Hook<"label", TagListLabelOptions<"label">>;
+/**
+ * Renders a label element for the
+ * [`TagInput`](https://ariakit.org/reference/tag-input) and also acts as the
+ * accessible name for the listbox element rendered by
+ * [`TagList`](https://ariakit.org/reference/tag-list).
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {2}
+ * <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 TagListLabel: (props: TagListLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagListLabelOptions<T extends ElementType = TagName> extends CompositeOptions<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;
+}
+export type TagListLabelProps<T extends ElementType = TagName> = Props<T, TagListLabelOptions<T>>;
+export {};

package/cjs/tag/tag-list.cjs

@@ -0,0 +1,141 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _ISJGSS4Scjs = require('../__chunks/ISJGSS4S.cjs');
+
+
+
+var _PVLZGFP6cjs = require('../__chunks/PVLZGFP6.cjs');
+
+
+var _EKW5CERCcjs = require('../__chunks/EKW5CERC.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');
+
+
+
+var _TW3SFX4Ccjs = require('../__chunks/TW3SFX4C.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+
+
+
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
+
+// src/tag/tag-list.tsx
+var _events = require('@ariakit/core/utils/events');
+var _focus = require('@ariakit/core/utils/focus');
+var _misc = require('@ariakit/core/utils/misc');
+var _platform = require('@ariakit/core/utils/platform');
+var _undo = require('@ariakit/core/utils/undo');
+var _jsxruntime = require('react/jsx-runtime');
+var TagName = "div";
+var useTagList = _NGD3IQDBcjs.createHook.call(void 0, 
+  function useTagList2(_a) {
+    var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
+    const context = _PVLZGFP6cjs.useTagProviderContext.call(void 0, );
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "TagList must receive a `store` prop or be wrapped in a TagProvider component."
+    );
+    const onMouseDownProp = props.onMouseDown;
+    const onMouseDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+      onMouseDownProp == null ? void 0 : onMouseDownProp(event);
+      if (event.defaultPrevented)
+        return;
+      const target = event.target;
+      const currentTarget = event.currentTarget;
+      const focusableTarget = _focus.getClosestFocusable.call(void 0, target);
+      const isSelfFocusable = focusableTarget === currentTarget;
+      if (!isSelfFocusable && currentTarget.contains(focusableTarget))
+        return;
+      const { inputElement } = store.getState();
+      _events.queueBeforeEvent.call(void 0, event.currentTarget, "mouseup", () => {
+        inputElement == null ? void 0 : inputElement.focus();
+      });
+    });
+    const onKeyDownProp = props.onKeyDown;
+    const onKeyDown = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+      onKeyDownProp == null ? void 0 : onKeyDownProp(event);
+      if (event.defaultPrevented)
+        return;
+      const pc = !_platform.isApple.call(void 0, );
+      const z = event.key === "z" || event.key === "Z";
+      const mod = pc ? event.ctrlKey : event.metaKey;
+      const shiftZ = event.shiftKey && z || pc && event.key === "y";
+      if (mod && shiftZ) {
+        event.preventDefault();
+        _undo.UndoManager.redo();
+      } else if (mod && z) {
+        event.preventDefault();
+        _undo.UndoManager.undo();
+      }
+    });
+    props = _TW3SFX4Ccjs.useWrapElement.call(void 0, 
+      props,
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PVLZGFP6cjs.TagScopedContextProvider, { value: store, children: element }),
+      [store]
+    );
+    props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
+      onMouseDown,
+      onKeyDown
+    });
+    props = _EKW5CERCcjs.useComposite.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    const orientation = store.useState(
+      (state) => state.orientation === "both" ? void 0 : state.orientation
+    );
+    const items = store.useState((state) => state.renderedItems);
+    const itemIds = items.filter((item) => !!item.value).map((item) => item.id);
+    const labelId = store.useState((state) => {
+      var _a2;
+      return (_a2 = state.labelElement) == null ? void 0 : _a2.id;
+    });
+    const listboxProps = {};
+    for (const key in props) {
+      if (key === "role" || key.startsWith("aria-")) {
+        const prop = key;
+        listboxProps[prop] = props[prop];
+        delete props[prop];
+      }
+    }
+    const touchDevice = _ISJGSS4Scjs.useTouchDevice.call(void 0, );
+    const children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+          role: touchDevice ? "list" : "listbox",
+          "aria-live": "polite",
+          "aria-relevant": "all",
+          "aria-atomic": true,
+          "aria-labelledby": labelId,
+          "aria-orientation": orientation,
+          "aria-owns": itemIds.join(" ")
+        }, listboxProps), {
+          style: { position: "fixed" }
+        })
+      ),
+      props.children
+    ] });
+    props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
+      children
+    });
+    return props;
+  }
+);
+var TagList = _NGD3IQDBcjs.forwardRef.call(void 0, function TagList2(props) {
+  const htmlProps = useTagList(props);
+  return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);
+});
+
+
+
+exports.TagList = TagList; exports.useTagList = useTagList;

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

@@ -0,0 +1,58 @@
+import type { ElementType } from "react";
+import type { CompositeOptions } from "../composite/composite.js";
+import type { Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `TagList` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagList();
+ * <Role.div {...props} />
+ * ```
+ */
+export declare const useTagList: import("../utils/types.js").Hook<"div", TagListOptions<"div">>;
+/**
+ * Renders a wrapper for [`Tag`](https://ariakit.org/reference/tag) and
+ * [`TagInput`](https://ariakit.org/reference/tag-input) components. This
+ * component is typically styled as an input field.
+ *
+ * The [`TagListLabel`](https://ariakit.org/reference/tag-list-label) component
+ * can be used to provide an accessible name for the listbox element that owns
+ * the tags.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {3-15}
+ * <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 TagList: (props: TagListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagListOptions<T extends ElementType = TagName> extends CompositeOptions<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;
+}
+export type TagListProps<T extends ElementType = TagName> = Props<T, TagListOptions<T>>;
+export {};

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

@@ -0,0 +1,58 @@
+import type { ElementType } from "react";
+import type { CompositeOptions } from "../composite/composite.js";
+import type { Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `TagList` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagList();
+ * <Role.div {...props} />
+ * ```
+ */
+export declare const useTagList: import("../utils/types.js").Hook<"div", TagListOptions<"div">>;
+/**
+ * Renders a wrapper for [`Tag`](https://ariakit.org/reference/tag) and
+ * [`TagInput`](https://ariakit.org/reference/tag-input) components. This
+ * component is typically styled as an input field.
+ *
+ * The [`TagListLabel`](https://ariakit.org/reference/tag-list-label) component
+ * can be used to provide an accessible name for the listbox element that owns
+ * the tags.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {3-15}
+ * <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 TagList: (props: TagListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagListOptions<T extends ElementType = TagName> extends CompositeOptions<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;
+}
+export type TagListProps<T extends ElementType = TagName> = Props<T, TagListOptions<T>>;
+export {};

package/cjs/tag/tag-provider.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _YWAHOWYEcjs = require('../__chunks/YWAHOWYE.cjs');
+
+
+var _PVLZGFP6cjs = require('../__chunks/PVLZGFP6.cjs');
+require('../__chunks/4H5ZMMOI.cjs');
+require('../__chunks/Q7DU7FP7.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/AV6KTKLE.cjs');
+
+// src/tag/tag-provider.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function TagProvider(props = {}) {
+  const store = _YWAHOWYEcjs.useTagStore.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _PVLZGFP6cjs.TagContextProvider, { value: store, children: props.children });
+}
+
+
+exports.TagProvider = TagProvider;

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import type { TagStoreProps } from "./tag-store.js";
+/**
+ * Provides a tag store to [Tag](https://ariakit.org/components/tag) components.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare function TagProvider(props?: TagProviderProps): import("react/jsx-runtime").JSX.Element;
+export interface TagProviderProps extends TagStoreProps {
+    children?: ReactNode;
+}

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+import type { TagStoreProps } from "./tag-store.js";
+/**
+ * Provides a tag store to [Tag](https://ariakit.org/components/tag) components.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+export declare function TagProvider(props?: TagProviderProps): import("react/jsx-runtime").JSX.Element;
+export interface TagProviderProps extends TagStoreProps {
+    children?: ReactNode;
+}

package/cjs/tag/tag-remove.cjs

@@ -0,0 +1,119 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _ISJGSS4Scjs = require('../__chunks/ISJGSS4S.cjs');
+
+
+
+
+var _PVLZGFP6cjs = require('../__chunks/PVLZGFP6.cjs');
+require('../__chunks/VPI3EKVY.cjs');
+require('../__chunks/NEK2UEJN.cjs');
+
+
+var _R6M66EKZcjs = require('../__chunks/R6M66EKZ.cjs');
+
+
+
+
+var _NGD3IQDBcjs = require('../__chunks/NGD3IQDB.cjs');
+
+
+
+
+var _TW3SFX4Ccjs = require('../__chunks/TW3SFX4C.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+
+
+
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
+
+// src/tag/tag-remove.tsx
+var _react = require('react');
+var _misc = require('@ariakit/core/utils/misc');
+var _jsxruntime = require('react/jsx-runtime');
+var TagName = "button";
+var useTagRemove = _NGD3IQDBcjs.createHook.call(void 0, 
+  function useTagRemove2(_a) {
+    var _b = _a, {
+      store,
+      value: valueProp,
+      removeOnClick = true
+    } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
+      "store",
+      "value",
+      "removeOnClick"
+    ]);
+    const context = _PVLZGFP6cjs.useTagContext.call(void 0, );
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "TagRemove must receive a `store` prop or be wrapped in a TagProvider component."
+    );
+    const id = _TW3SFX4Ccjs.useId.call(void 0, props.id);
+    const setRemoveId = _react.useContext.call(void 0, _PVLZGFP6cjs.TagRemoveIdContext);
+    const valueFromContext = _react.useContext.call(void 0, _PVLZGFP6cjs.TagValueContext);
+    const withinTag = valueFromContext !== null;
+    const value = valueProp != null ? valueProp : valueFromContext;
+    _react.useEffect.call(void 0, () => {
+      setRemoveId == null ? void 0 : setRemoveId(id);
+      return () => setRemoveId == null ? void 0 : setRemoveId();
+    }, [id, setRemoveId]);
+    const onClickProp = props.onClick;
+    const removeOnClickProp = _TW3SFX4Ccjs.useBooleanEvent.call(void 0, removeOnClick);
+    const onClick = _TW3SFX4Ccjs.useEvent.call(void 0, (event) => {
+      onClickProp == null ? void 0 : onClickProp(event);
+      if (event.defaultPrevented)
+        return;
+      if (!store)
+        return;
+      if (!value)
+        return;
+      if (!removeOnClickProp(event))
+        return;
+      const { inputElement } = store.getState();
+      store.removeValue(value);
+      inputElement == null ? void 0 : inputElement.focus();
+    });
+    const children = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "svg",
+      {
+        display: "block",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.5,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        height: "1em",
+        width: "1em",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M7.28782 5.46243C7.80963 4.92308 8.07054 4.65341 8.37751 4.46038C8.64963 4.28926 8.94749 4.16299 9.25969 4.0864C9.61186 4 9.98709 4 10.7375 4H16.8C17.9201 4 18.4802 4 18.908 4.21799C19.2843 4.40973 19.5903 4.71569 19.782 5.09202C20 5.51984 20 6.0799 20 7.2V16.8C20 17.9201 20 18.4802 19.782 18.908C19.5903 19.2843 19.2843 19.5903 18.908 19.782C18.4802 20 17.9201 20 16.8 20H10.7512C9.99584 20 9.61818 20 9.264 19.9126C8.95004 19.8351 8.65067 19.7073 8.37748 19.5342C8.06931 19.339 7.80802 19.0663 7.28544 18.521L2.59879 13.63C2.03714 13.0439 1.75631 12.7508 1.65115 12.4158C1.55859 12.121 1.55935 11.8048 1.65332 11.5104C1.7601 11.1759 2.04233 10.8842 2.60679 10.3008L7.28782 5.46243Z" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.052 9L16 15M15.948 9L10 15" })
+        ]
+      }
+    );
+    const touchDevice = _ISJGSS4Scjs.useTouchDevice.call(void 0, ) && withinTag;
+    props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+      id,
+      children,
+      role: touchDevice ? "button" : void 0,
+      "aria-hidden": !touchDevice,
+      "aria-label": touchDevice ? `Remove ${value}` : withinTag ? "Press Delete or Backspace to remove" : void 0
+    }, props), {
+      onClick,
+      render: withinTag ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _R6M66EKZcjs.Role.span, { render: props.render }) : props.render
+    });
+    return props;
+  }
+);
+var TagRemove = _NGD3IQDBcjs.forwardRef.call(void 0, function TagRemove2(props) {
+  const htmlProps = useTagRemove(props);
+  return _NGD3IQDBcjs.createElement.call(void 0, TagName, htmlProps);
+});
+
+
+
+exports.TagRemove = TagRemove; exports.useTagRemove = useTagRemove;

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

@@ -0,0 +1,67 @@
+import type { ElementType, MouseEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { Options, Props } from "../utils/types.js";
+import type { TagStore } from "./tag-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+/**
+ * Returns props to create a `TagRemove` component.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagRemove();
+ * <Role.button {...props} />
+ * ```
+ */
+export declare const useTagRemove: import("../utils/types.js").Hook<"button", TagRemoveOptions<"button">>;
+/**
+ * Renders a `Backspace` icon inside a
+ * [`Tag`](https://ariakit.org/reference/tag) component that removes the tag
+ * when clicked with a mouse.
+ * @see https://ariakit.org/components/tag
+ * @example
+ * ```jsx {9}
+ * <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 TagRemove: (props: TagRemoveProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface TagRemoveOptions<_T extends ElementType = TagName> extends Options {
+    /**
+     * 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 value of the tag to remove. If not provided, the value will be inferred
+     * from the parent [`Tag`](https://ariakit.org/reference/tag) component.
+     */
+    value?: string;
+    /**
+     * Determines if the tag should be removed when clicked with a mouse. If a
+     * function is provided, it will be called with the click event and should
+     * return a boolean.
+     * @default true
+     */
+    removeOnClick?: BooleanOrCallback<MouseEvent<HTMLType>>;
+}
+export type TagRemoveProps<T extends ElementType = TagName> = Props<T, TagRemoveOptions<T>>;
+export {};