@ariakit/react-components 0.1.0

package/dist/tag/tag-remove.d.ts

@@ -0,0 +1,71 @@
+import { t as TagStore } from "../tag-store-xANOvuGo.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType, MouseEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/tag/tag-remove.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+/**
+ * Returns props to create a `TagRemove` component.
+ * @see https://ariakit.com/components/tag
+ * @example
+ * ```jsx
+ * const props = useTagRemove();
+ * <Role.button {...props} />
+ * ```
+ */
+declare const useTagRemove: import("@ariakit/react-utils").Hook<"button", TagRemoveOptions<"button">>;
+/**
+ * Renders a `Backspace` icon inside a
+ * [`Tag`](https://ariakit.com/reference/tag) component that removes the tag
+ * when clicked with a mouse.
+ * @see https://ariakit.com/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>
+ * ```
+ */
+declare const TagRemove: (props: TagRemoveProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface TagRemoveOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useTagStore`](https://ariakit.com/reference/use-tag-store) hook. If not
+   * provided, the closest
+   * [`TagProvider`](https://ariakit.com/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.com/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>>;
+}
+type TagRemoveProps<T extends ElementType = TagName> = Props<T, TagRemoveOptions<T>>;
+//#endregion
+export { TagRemove, TagRemoveOptions, TagRemoveProps, useTagRemove };
+//# sourceMappingURL=tag-remove.d.ts.map

package/dist/tag/tag-remove.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-remove.d.ts","names":["Options","Props","BooleanOrCallback","ElementType","MouseEvent","TagStore","TagName","HTMLType","HTMLElementTagNameMap","useTagRemove","TagRemoveOptions","Hook","TagRemove","TagRemoveProps","props","ReactElement","JSXElementConstructor","_T","store","value","removeOnClick","T"],"sources":["../../src/tag/tag-remove.d.ts"],"mappings":";;;;;;cAIcM,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,KACxBC,QAAAA,GAAWC,qBAAAA,CAAsBF,OAAO;;;;AAFxB;AAAA;;;;AACQ;cAWRG,YAAAA,iCAA6CE,IAAAA,WAAeD,gBAAgB;;;;AAVpD;AAU7C;;;;AAAiG;AA0BjG;;;;;;;;;AAA2I;AAC3I;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,YAA4BP,WAAAA,GAAcG,OAAAA,UAAiBN,OAAAA;EAoBxDE;;;;;;;EAZhBgB,KAAAA,GAAQb,QAAAA;EAARa;;;;EAKAC,KAAAA;EAOkCf;;;AAAmB;AAEzD;;EAFIgB,aAAAA,GAAgBlB,iBAAAA,CAAkBE,UAAAA,CAAWG,QAAAA;AAAAA;AAAAA,KAErCM,cAAAA,WAAyBV,WAAAA,GAAcG,OAAAA,IAAWL,KAAAA,CAAMoB,CAAAA,EAAGX,gBAAAA,CAAiBW,CAAAA"}

package/dist/tag/tag-remove.js

@@ -0,0 +1,102 @@
+"use client";
+import { Role } from "../role/role.js";
+import { TagRemoveIdContext, TagValueContext, useTagContext } from "./tag-context.js";
+import { useTouchDevice } from "./utils.js";
+import { createElement, createHook, forwardRef, useBooleanEvent, useEvent, useId } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useContext, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/tag/tag-remove.tsx
+const TagName = "button";
+/**
+* Returns props to create a `TagRemove` component.
+* @see https://ariakit.com/components/tag
+* @example
+* ```jsx
+* const props = useTagRemove();
+* <Role.button {...props} />
+* ```
+*/
+const useTagRemove = createHook(function useTagRemove({ store, value: valueProp, removeOnClick = true, ...props }) {
+	const context = useTagContext();
+	store = store || context;
+	invariant(store, "TagRemove must receive a `store` prop or be wrapped in a TagProvider component.");
+	const id = useId(props.id);
+	const setRemoveId = useContext(TagRemoveIdContext);
+	const valueFromContext = useContext(TagValueContext);
+	const withinTag = valueFromContext !== null;
+	const value = valueProp ?? valueFromContext;
+	useEffect(() => {
+		setRemoveId?.(id);
+		return () => setRemoveId?.();
+	}, [id, setRemoveId]);
+	const onClickProp = props.onClick;
+	const removeOnClickProp = useBooleanEvent(removeOnClick);
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		if (!value) return;
+		if (!removeOnClickProp(event)) return;
+		const { inputElement } = store.getState();
+		store.removeValue(value);
+		inputElement?.focus();
+	});
+	const children = /* @__PURE__ */ jsxs("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__ */ jsx("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__ */ jsx("path", { d: "M10.052 9L16 15M15.948 9L10 15" })]
+	});
+	const touchDevice = useTouchDevice() && withinTag;
+	props = {
+		children,
+		role: touchDevice ? "button" : void 0,
+		"aria-hidden": !touchDevice,
+		"aria-label": touchDevice ? `Remove ${value}` : withinTag ? "Press Delete or Backspace to remove" : void 0,
+		...props,
+		id,
+		onClick,
+		render: withinTag ? /* @__PURE__ */ jsx(Role.span, { render: props.render }) : props.render
+	};
+	return props;
+});
+/**
+* Renders a `Backspace` icon inside a
+* [`Tag`](https://ariakit.com/reference/tag) component that removes the tag
+* when clicked with a mouse.
+* @see https://ariakit.com/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>
+* ```
+*/
+const TagRemove = forwardRef(function TagRemove(props) {
+	return createElement(TagName, useTagRemove(props));
+});
+//#endregion
+export { TagRemove, useTagRemove };
+
+//# sourceMappingURL=tag-remove.js.map

package/dist/tag/tag-remove.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-remove.js","names":[],"sources":["../../src/tag/tag-remove.tsx"],"sourcesContent":["import {\n  useBooleanEvent,\n  useEvent,\n  useId,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useContext, useEffect } from \"react\";\nimport { Role } from \"../role/role.tsx\";\nimport {\n  TagRemoveIdContext,\n  TagValueContext,\n  useTagContext,\n} from \"./tag-context.tsx\";\nimport type { TagStore } from \"./tag-store.ts\";\nimport { useTouchDevice } from \"./utils.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `TagRemove` component.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx\n * const props = useTagRemove();\n * <Role.button {...props} />\n * ```\n */\nexport const useTagRemove = createHook<TagName, TagRemoveOptions>(\n  function useTagRemove({\n    store,\n    value: valueProp,\n    removeOnClick = true,\n    ...props\n  }) {\n    const context = useTagContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TagRemove must receive a `store` prop or be wrapped in a TagProvider component.\",\n    );\n\n    const id = useId(props.id);\n    const setRemoveId = useContext(TagRemoveIdContext);\n    const valueFromContext = useContext(TagValueContext);\n    const withinTag = valueFromContext !== null;\n    const value = valueProp ?? valueFromContext;\n\n    useEffect(() => {\n      setRemoveId?.(id);\n      return () => setRemoveId?.();\n    }, [id, setRemoveId]);\n\n    const onClickProp = props.onClick;\n    const removeOnClickProp = useBooleanEvent(removeOnClick);\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!store) return;\n      if (!value) return;\n      if (!removeOnClickProp(event)) return;\n      const { inputElement } = store.getState();\n      store.removeValue(value);\n      inputElement?.focus();\n    });\n\n    const children = (\n      <svg\n        display=\"block\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={1.5}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        height=\"1em\"\n        width=\"1em\"\n        aria-hidden\n      >\n        <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\" />\n        <path d=\"M10.052 9L16 15M15.948 9L10 15\" />\n      </svg>\n    );\n\n    const touchDevice = useTouchDevice() && withinTag;\n\n    props = {\n      children,\n      role: touchDevice ? \"button\" : undefined,\n      \"aria-hidden\": !touchDevice,\n      \"aria-label\": touchDevice\n        ? `Remove ${value}`\n        : withinTag\n          ? \"Press Delete or Backspace to remove\"\n          : undefined,\n      ...props,\n      id,\n      onClick,\n      render: withinTag ? <Role.span render={props.render} /> : props.render,\n    };\n\n    return props;\n  },\n);\n\n/**\n * Renders a `Backspace` icon inside a\n * [`Tag`](https://ariakit.com/reference/tag) component that removes the tag\n * when clicked with a mouse.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx {9}\n * <TagProvider>\n *   <TagListLabel>Invitees</TagListLabel>\n *   <TagList>\n *     <TagValues>\n *       {(values) =>\n *         values.map((value) => (\n *           <Tag key={value} value={value}>\n *             {value}\n *             <TagRemove />\n *           </Tag>\n *         ))\n *       }\n *     </TagValues>\n *     <TagInput />\n *   </TagList>\n * </TagProvider>\n * ```\n */\nexport const TagRemove = forwardRef(function TagRemove(props: TagRemoveProps) {\n  const htmlProps = useTagRemove(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TagRemoveOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useTagStore`](https://ariakit.com/reference/use-tag-store) hook. If not\n   * provided, the closest\n   * [`TagProvider`](https://ariakit.com/reference/tag-provider) component's\n   * context will be used.\n   */\n  store?: TagStore;\n  /**\n   * The value of the tag to remove. If not provided, the value will be inferred\n   * from the parent [`Tag`](https://ariakit.com/reference/tag) component.\n   */\n  value?: string;\n  /**\n   * Determines if the tag should be removed when clicked with a mouse. If a\n   * function is provided, it will be called with the click event and should\n   * return a boolean.\n   * @default true\n   */\n  removeOnClick?: BooleanOrCallback<MouseEvent<HTMLType>>;\n}\n\nexport type TagRemoveProps<T extends ElementType = TagName> = Props<\n  T,\n  TagRemoveOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;MA0CI,eAAgB,WAAc,SAAA,aAAA,EAAA,OAAA,OAAA,WAAA,gBAAA,MAAA,GAAA,SAAA;CAC9B,MAAA,UAAQ,cAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,iFAAQ;CACzB,MAAM,KAAA,MAAA,MAAc,EAAA;CACpB,MAAM,cAAA,WAAmB,kBAAW;CACpC,MAAM,mBAAY,WAAA,eAAqB;CACvC,MAAM,YAAQ,qBAAa;CAE3B,MAAA,QAAA,aAAgB;iBACA;EACd,cAAa,EAAA;EACf,aAAQ,cAAY;CAEpB,GAAA,CAAA,IAAM,WAAA,CAAc;CACpB,MAAM,cAAA,MAAoB;CAE1B,MAAM,oBAAoB,gBAAgC,aAAA;OACxD,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAC,kBAAO;EACZ,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAA;EACL,IAAA,CAAA,kBAAQ,KAAiB,GAAM;EAC/B,MAAM,EAAA,iBAAiB,MAAA,SAAA;EACvB,MAAA,YAAc,KAAM;EACrB,cAAA,MAAA;CAED,CAAA;OAEI,WAAQ,qBAAA,OAAA;EACR,SAAQ;EACR,SAAK;EACL,MAAA;EACA,QAAA;EACA,aAAA;EACA,eAAA;EACA,gBAAO;EACP,QAAM;EACN,OAAA;iBAEA;;CAKJ,CAAA;CAEA,MAAA,cAAQ,eAAA,KAAA;SACN;EACA;EACA,MAAA,cAAgB,WAAA,KAAA;EAChB,eAAc,CAAA;EAKd,cAAG,cAAA,UAAA,UAAA,YAAA,wCAAA,KAAA;EACH,GAAA;EACA;EACA;EACF,QAAA,YAAA,oBAAA,KAAA,MAAA,EAAA,QAAA,MAAA,OAAA,CAAA,IAAA,MAAA;CAEA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BE,YAAO,WAAc,SADH,UAAa,OACQ;CACxC,OAAA,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/tag/tag-store.d.ts

@@ -0,0 +1,2 @@
+import { a as TagStoreProps, c as useTagStoreProps, i as TagStoreOptions, n as TagStoreFunctions, o as TagStoreState, r as TagStoreItem, s as useTagStore, t as TagStore } from "../tag-store-xANOvuGo.js";
+export { TagStore, TagStoreFunctions, TagStoreItem, TagStoreOptions, TagStoreProps, TagStoreState, useTagStore, useTagStoreProps };

package/dist/tag/tag-store.js

@@ -0,0 +1,38 @@
+"use client";
+import { useCompositeStoreProps } from "../composite/composite-store.js";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/tag/tag-store";
+//#region src/tag/tag-store.ts
+function useTagStoreProps(store, update, props) {
+	useStoreProps(store, props, "value", "setValue");
+	useStoreProps(store, props, "values", "setValues");
+	return useCompositeStoreProps(store, update, props);
+}
+/**
+* Creates a tag store to control the state of
+* [Tag](https://ariakit.com/components/tag) components.
+* @see https://ariakit.com/components/tag
+* @example
+* ```jsx
+* const tag = useTagStore({ defaultValues: ["Apple", "Banana"]});
+* const values = useStoreState(tag, "values");
+*
+* <TagList store={tag}>
+*   {values.map((value) => (
+*     <Tag key={value} value={value}>
+*       {value}
+*       <TagRemove />
+*     </Tag>
+*   ))}
+*   <TagInput />
+* </TagList>
+* ```
+*/
+function useTagStore(props = {}) {
+	const [store, update] = useStore(Core.createTagStore, props);
+	return useTagStoreProps(store, update, props);
+}
+//#endregion
+export { useTagStore, useTagStoreProps };
+
+//# sourceMappingURL=tag-store.js.map

package/dist/tag/tag-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-store.js","names":[],"sources":["../../src/tag/tag-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/tag/tag-store\";\nimport { useStore, useStoreProps } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport type {\n  CompositeStoreFunctions,\n  CompositeStoreOptions,\n  CompositeStoreState,\n} from \"../composite/composite-store.ts\";\nimport { useCompositeStoreProps } from \"../composite/composite-store.ts\";\n\nexport function useTagStoreProps<T extends Core.TagStore>(\n  store: T,\n  update: () => void,\n  props: TagStoreProps,\n) {\n  useStoreProps(store, props, \"value\", \"setValue\");\n  useStoreProps(store, props, \"values\", \"setValues\");\n  return useCompositeStoreProps(store, update, props);\n}\n\n/**\n * Creates a tag store to control the state of\n * [Tag](https://ariakit.com/components/tag) components.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx\n * const tag = useTagStore({ defaultValues: [\"Apple\", \"Banana\"]});\n * const values = useStoreState(tag, \"values\");\n *\n * <TagList store={tag}>\n *   {values.map((value) => (\n *     <Tag key={value} value={value}>\n *       {value}\n *       <TagRemove />\n *     </Tag>\n *   ))}\n *   <TagInput />\n * </TagList>\n * ```\n */\nexport function useTagStore(props: TagStoreProps = {}): TagStore {\n  const [store, update] = useStore(Core.createTagStore, props);\n  return useTagStoreProps(store, update, props);\n}\n\nexport interface TagStoreItem extends Core.TagStoreItem {}\n\nexport interface TagStoreState\n  extends Core.TagStoreState, CompositeStoreState<TagStoreItem> {}\n\nexport interface TagStoreFunctions\n  extends Core.TagStoreFunctions, CompositeStoreFunctions<TagStoreItem> {}\n\nexport interface TagStoreOptions\n  extends Core.TagStoreOptions, CompositeStoreOptions<TagStoreItem> {\n  /**\n   * A callback that gets called when the\n   * [`value`](https://ariakit.com/reference/tag-provider#value) state\n   * changes.\n   */\n  setValue?: (value: TagStoreState[\"value\"]) => void;\n  /**\n   * A callback that gets called when the\n   * [`values`](https://ariakit.com/reference/tag-provider#values) state\n   * changes.\n   */\n  setValues?: (values: TagStoreState[\"values\"]) => void;\n}\n\nexport interface TagStoreProps extends TagStoreOptions, Core.TagStoreProps {}\n\nexport interface TagStore extends TagStoreFunctions, Store<Core.TagStore> {}\n"],"mappings":";;;;;SAeE,iBAAqB,OAAO,QAAS,OAAU;CAC/C,cAAc,OAAO,OAAO,SAAA,UAAU;CACtC,cAAO,OAAA,OAAA,UAA8B,WAAQ;CAC/C,OAAA,uBAAA,OAAA,QAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;SAuBS,YAAO,QAAU,CAAA,GAAA;CACxB,MAAA,CAAO,OAAA,UAAiB,SAAO,KAAA,gBAAa,KAAA;CAC9C,OAAA,iBAAA,OAAA,QAAA,KAAA"}

package/dist/tag/tag-value.d.ts

@@ -0,0 +1,49 @@
+import { o as TagStoreState, t as TagStore } from "../tag-store-xANOvuGo.js";
+import { ReactNode } from "react";
+
+//#region src/tag/tag-value.d.ts
+/**
+ * Renders the current
+ * [`value`](https://ariakit.com/reference/use-tag-store#value) state in
+ * the [tag store](https://ariakit.com/reference/use-tag-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.com/reference/tag-value#children) function
+ * that gets called with the current value as an argument. This can be used as
+ * an uncontrolled API to render the tag value in a custom way.
+ * @see https://ariakit.com/components/tag
+ * @example
+ * ```jsx {3-5}
+ * <TagProvider>
+ *   <TagInput />
+ *   <TagValue>
+ *     {(value) => `Current value: ${value}`}
+ *   </TagValue>
+ * </TagProvider>
+ * ```
+ */
+declare function TagValue({
+  store,
+  children
+}?: TagValueProps): ReactNode;
+interface TagValueProps {
+  /**
+   * Object returned by the
+   * [`useTagStore`](https://ariakit.com/reference/use-tag-store)
+   * hook. If not provided, the closest
+   * [`TagProvider`](https://ariakit.com/reference/tag-provider)
+   * component's context will be used.
+   */
+  store?: TagStore;
+  /**
+   * A function that gets called with the current value as an argument. It can
+   * be used to render the tag value in a custom way.
+   */
+  children?: (value: TagStoreState["value"]) => ReactNode;
+}
+//#endregion
+export { TagValue, TagValueProps };
+//# sourceMappingURL=tag-value.d.ts.map

package/dist/tag/tag-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-value.d.ts","names":["ReactNode","TagStore","TagStoreState","TagValue","store","children","TagValueProps","value"],"sources":["../../src/tag/tag-value.d.ts"],"mappings":";;;;;;AAyBA;;;;;;;;;;;;;;;;AAAgF;AAChF;;;;iBADwBG,QAAAA,CAAAA;EAAWC,KAAAA;EAAOC;AAAAA,IAAaC,aAAAA,GAAgBN,SAAAA;AAAAA,UACtDM,aAAAA;EAa0C;;;;;;;EALvDF,KAAAA,GAAQH,QAAAA;EAK+C;AAAA;;;EAAvDI,QAAAA,IAAYE,KAAAA,EAAOL,aAAAA,cAA2BF,SAAAA;AAAAA"}

package/dist/tag/tag-value.js

@@ -0,0 +1,40 @@
+"use client";
+import { useTagContext } from "./tag-context.js";
+import { invariant } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/tag/tag-value.tsx
+/**
+* Renders the current
+* [`value`](https://ariakit.com/reference/use-tag-store#value) state in
+* the [tag store](https://ariakit.com/reference/use-tag-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.com/reference/tag-value#children) function
+* that gets called with the current value as an argument. This can be used as
+* an uncontrolled API to render the tag value in a custom way.
+* @see https://ariakit.com/components/tag
+* @example
+* ```jsx {3-5}
+* <TagProvider>
+*   <TagInput />
+*   <TagValue>
+*     {(value) => `Current value: ${value}`}
+*   </TagValue>
+* </TagProvider>
+* ```
+*/
+function TagValue({ store, children } = {}) {
+	const context = useTagContext();
+	store = store || context;
+	invariant(store, "TagValue must receive a `store` prop or be wrapped in a TagProvider component.");
+	const value = useStoreState(store, "value");
+	if (children) return children(value);
+	return value;
+}
+//#endregion
+export { TagValue };
+
+//# sourceMappingURL=tag-value.js.map

package/dist/tag/tag-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-value.js","names":[],"sources":["../../src/tag/tag-value.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ReactNode } from \"react\";\nimport { useTagContext } from \"./tag-context.tsx\";\nimport type { TagStore, TagStoreState } from \"./tag-store.ts\";\n\n/**\n * Renders the current\n * [`value`](https://ariakit.com/reference/use-tag-store#value) state in\n * the [tag store](https://ariakit.com/reference/use-tag-store).\n *\n * As a value component, it doesn't render any DOM elements and therefore\n * doesn't accept HTML props.\n *\n * It takes a\n * [`children`](https://ariakit.com/reference/tag-value#children) function\n * that gets called with the current value as an argument. This can be used as\n * an uncontrolled API to render the tag value in a custom way.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx {3-5}\n * <TagProvider>\n *   <TagInput />\n *   <TagValue>\n *     {(value) => `Current value: ${value}`}\n *   </TagValue>\n * </TagProvider>\n * ```\n */\nexport function TagValue({ store, children }: TagValueProps = {}) {\n  const context = useTagContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"TagValue must receive a `store` prop or be wrapped in a TagProvider component.\",\n  );\n\n  const value = useStoreState(store, \"value\");\n\n  if (children) {\n    return children(value);\n  }\n\n  return value;\n}\n\nexport interface TagValueProps {\n  /**\n   * Object returned by the\n   * [`useTagStore`](https://ariakit.com/reference/use-tag-store)\n   * hook. If not provided, the closest\n   * [`TagProvider`](https://ariakit.com/reference/tag-provider)\n   * component's context will be used.\n   */\n  store?: TagStore;\n  /**\n   * A function that gets called with the current value as an argument. It can\n   * be used to render the tag value in a custom way.\n   */\n  children?: (value: TagStoreState[\"value\"]) => ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;SA8BQ,SAAU,EAAA,OAAA,aAAc,CAAA,GAAA;CAC9B,MAAA,UAAQ,cAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAQ,gFAA4B;CAE1C,MAAI,QACF,cAAO,OAAc,OAAA;CAGvB,IAAA,UAAO,OAAA,SAAA,KAAA;CACT,OAAA"}

package/dist/tag/tag-values.d.ts

@@ -0,0 +1,60 @@
+import { o as TagStoreState, t as TagStore } from "../tag-store-xANOvuGo.js";
+import { ReactNode } from "react";
+
+//#region src/tag/tag-values.d.ts
+/**
+ * Renders the current
+ * [`values`](https://ariakit.com/reference/use-tag-store#values) state in the
+ * [tag store](https://ariakit.com/reference/use-tag-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.com/reference/tag-values#children)
+ * function that gets called with the current values as an argument. This can be
+ * used as an uncontrolled API to render
+ * [`Tag`](https://ariakit.com/reference/tag) components.
+ * @see https://ariakit.com/components/tag
+ * @example
+ * ```jsx {4-13}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+declare function TagValues({
+  store,
+  children
+}?: TagValuesProps): ReactNode;
+interface TagValuesProps {
+  /**
+   * Object returned by the
+   * [`useTagStore`](https://ariakit.com/reference/use-tag-store) hook. If not
+   * provided, the closest
+   * [`TagProvider`](https://ariakit.com/reference/tag-provider) component's
+   * context will be used.
+   */
+  store?: TagStore;
+  /**
+   * A function that gets called with the current values as an argument. This
+   * can be used as an uncontrolled API to render
+   * [`Tag`](https://ariakit.com/reference/tag) components.
+   */
+  children?: (values: TagStoreState["values"]) => ReactNode;
+}
+//#endregion
+export { TagValues, TagValuesProps };
+//# sourceMappingURL=tag-values.d.ts.map

package/dist/tag/tag-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-values.d.ts","names":["ReactNode","TagStore","TagStoreState","TagValues","store","children","TagValuesProps","values"],"sources":["../../src/tag/tag-values.d.ts"],"mappings":";;;;;;AAmCA;;;;;;;;;;;;;;;;AAAkF;AAClF;;;;;;;;;;;;;;iBADwBG,SAAAA,CAAAA;EAAYC,KAAAA;EAAOC;AAAAA,IAAaC,cAAAA,GAAiBN,SAAAA;AAAAA,UACxDM,cAAAA;;;;;;;;EAQbF,KAAAA,GAAQH,QAAAA;;;;;;EAMRI,QAAAA,IAAYE,MAAAA,EAAQL,aAAAA,eAA4BF,SAAAA;AAAAA"}

package/dist/tag/tag-values.js

@@ -0,0 +1,50 @@
+"use client";
+import { useTagContext } from "./tag-context.js";
+import { invariant } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/tag/tag-values.tsx
+/**
+* Renders the current
+* [`values`](https://ariakit.com/reference/use-tag-store#values) state in the
+* [tag store](https://ariakit.com/reference/use-tag-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.com/reference/tag-values#children)
+* function that gets called with the current values as an argument. This can be
+* used as an uncontrolled API to render
+* [`Tag`](https://ariakit.com/reference/tag) components.
+* @see https://ariakit.com/components/tag
+* @example
+* ```jsx {4-13}
+* <TagProvider>
+*   <TagListLabel>Invitees</TagListLabel>
+*   <TagList>
+*     <TagValues>
+*       {(values) =>
+*         values.map((value) => (
+*           <Tag key={value} value={value}>
+*             {value}
+*             <TagRemove />
+*           </Tag>
+*         ))
+*       }
+*     </TagValues>
+*     <TagInput />
+*   </TagList>
+* </TagProvider>
+* ```
+*/
+function TagValues({ store, children } = {}) {
+	const context = useTagContext();
+	store = store || context;
+	invariant(store, "TagValues must receive a `store` prop or be wrapped in a TagProvider component.");
+	const values = useStoreState(store, "values");
+	if (children) return children(values);
+	return values;
+}
+//#endregion
+export { TagValues };
+
+//# sourceMappingURL=tag-values.js.map

package/dist/tag/tag-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-values.js","names":[],"sources":["../../src/tag/tag-values.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ReactNode } from \"react\";\nimport { useTagContext } from \"./tag-context.tsx\";\nimport type { TagStore, TagStoreState } from \"./tag-store.ts\";\n\n/**\n * Renders the current\n * [`values`](https://ariakit.com/reference/use-tag-store#values) state in the\n * [tag store](https://ariakit.com/reference/use-tag-store).\n *\n * As a value component, it doesn't render any DOM elements and therefore\n * doesn't accept HTML props.\n *\n * It takes a [`children`](https://ariakit.com/reference/tag-values#children)\n * function that gets called with the current values as an argument. This can be\n * used as an uncontrolled API to render\n * [`Tag`](https://ariakit.com/reference/tag) components.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx {4-13}\n * <TagProvider>\n *   <TagListLabel>Invitees</TagListLabel>\n *   <TagList>\n *     <TagValues>\n *       {(values) =>\n *         values.map((value) => (\n *           <Tag key={value} value={value}>\n *             {value}\n *             <TagRemove />\n *           </Tag>\n *         ))\n *       }\n *     </TagValues>\n *     <TagInput />\n *   </TagList>\n * </TagProvider>\n * ```\n */\nexport function TagValues({ store, children }: TagValuesProps = {}) {\n  const context = useTagContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"TagValues must receive a `store` prop or be wrapped in a TagProvider component.\",\n  );\n\n  const values = useStoreState(store, \"values\");\n\n  if (children) {\n    return children(values);\n  }\n\n  return values;\n}\n\nexport interface TagValuesProps {\n  /**\n   * Object returned by the\n   * [`useTagStore`](https://ariakit.com/reference/use-tag-store) hook. If not\n   * provided, the closest\n   * [`TagProvider`](https://ariakit.com/reference/tag-provider) component's\n   * context will be used.\n   */\n  store?: TagStore;\n  /**\n   * A function that gets called with the current values as an argument. This\n   * can be used as an uncontrolled API to render\n   * [`Tag`](https://ariakit.com/reference/tag) components.\n   */\n  children?: (values: TagStoreState[\"values\"]) => ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAwCQ,UAAU,EAAA,OAAA,aAAc,CAAA,GAAA;CAC9B,MAAA,UAAQ,cAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAS,iFAA6B;CAE5C,MAAI,SACF,cAAO,OAAe,QAAA;CAGxB,IAAA,UAAO,OAAA,SAAA,MAAA;CACT,OAAA"}

package/dist/tag/tag.d.ts

@@ -0,0 +1,78 @@
+import { t as TagStore } from "../tag-store-xANOvuGo.js";
+import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, KeyboardEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/tag/tag.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
+/**
+ * Returns props to create a `Tag` component.
+ * @see https://ariakit.com/components/tag
+ * @example
+ * ```jsx
+ * const props = useTag();
+ * <Role.div {...props} />
+ * ```
+ */
+declare const useTag: import("@ariakit/react-utils").Hook<"div", TagOptions<"div">>;
+/**
+ * Renders a tag element inside a
+ * [`TagList`](https://ariakit.com/reference/tag-list) wrapper.
+ *
+ * The user can remove the tag by pressing `Backspace` or `Delete` keys when the
+ * tag is focused. The
+ * [`removeOnKeyPress`](https://ariakit.com/reference/tag#removeonkeypress) prop
+ * can be used to disable this behavior.
+ *
+ * When a printable key is pressed, the focus is automatically moved to the
+ * input element.
+ * @see https://ariakit.com/components/tag
+ * @example
+ * ```jsx {7-10}
+ * <TagProvider>
+ *   <TagListLabel>Invitees</TagListLabel>
+ *   <TagList>
+ *     <TagValues>
+ *       {(values) =>
+ *         values.map((value) => (
+ *           <Tag key={value} value={value}>
+ *             {value}
+ *             <TagRemove />
+ *           </Tag>
+ *         ))
+ *       }
+ *     </TagValues>
+ *     <TagInput />
+ *   </TagList>
+ * </TagProvider>
+ * ```
+ */
+declare const Tag: (props: TagProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface TagOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
+  /**
+   * Object returned by the
+   * [`useTagStore`](https://ariakit.com/reference/use-tag-store) hook. If not
+   * provided, the closest [`TagList`](https://ariakit.com/reference/tag-list)
+   * component's context will be used.
+   */
+  store?: TagStore;
+  /**
+   * The unique value of the tag. This is automatically rendered as the tag's
+   * content if no children are provided.
+   */
+  value: string;
+  /**
+   * Defines the behavior of the `Backspace` and `Delete` keys when the tag is
+   * focused. If `true`, the tag is removed. If it's a function, it's invoked
+   * with the key event and should return a boolean.
+   * @default true
+   */
+  removeOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLType>>;
+}
+type TagProps<T extends ElementType = TagName> = Props<T, TagOptions<T>>;
+//#endregion
+export { Tag, TagOptions, TagProps, useTag };
+//# sourceMappingURL=tag.d.ts.map

package/dist/tag/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","names":["Props","BooleanOrCallback","ElementType","KeyboardEvent","CompositeItemOptions","TagStore","TagName","HTMLType","HTMLElementTagNameMap","useTag","TagOptions","Hook","Tag","TagProps","props","ReactElement","JSXElementConstructor","T","store","value","removeOnKeyPress"],"sources":["../../src/tag/tag.d.ts"],"mappings":";;;;;;;cAKcM,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,KACxBC,QAAAA,GAAWC,qBAAAA,CAAsBF,OAAO;;;;AAFxB;AAAA;;;;AACQ;cAWRG,MAAAA,iCAAuCE,IAAAA,QAAYD,UAAU;;;;AAVrC;AAU7C;;;;AAAkF;AAiClF;;;;;;;;;AAA+H;AAC/H;;;;;;;;;;;;;cADqBE,GAAAA,GAAME,KAAAA,EAAOD,QAAQ,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzFN,UAAAA,WAAqBR,WAAAA,GAAcI,OAAAA,UAAiBF,oBAAAA,CAAqBa,CAAAA;EAAtCX;;;;;;EAOhDY,KAAAA,GAAQb,QAAAA;EAYWJ;;;;EAPnBkB,KAAAA;EASQN;;;;;;EAFRO,gBAAAA,GAAmBnB,iBAAAA,CAAkBE,aAAAA,CAAcI,QAAAA;AAAAA;AAAAA,KAE3CM,QAAAA,WAAmBX,WAAAA,GAAcI,OAAAA,IAAWN,KAAAA,CAAMiB,CAAAA,EAAGP,UAAAA,CAAWO,CAAAA"}