@ariakit/react-components 0.1.0

package/dist/tag/tag-input.js

@@ -0,0 +1,162 @@
+"use client";
+import { useCompositeItem } from "../composite/composite-item.js";
+import { useTagContext } from "./tag-context.js";
+import { createElement, createHook, forwardRef, useBooleanEvent, useEvent, useMergeRefs } from "@ariakit/react-utils";
+import { UndoManager, getInputType, getTextboxSelection, invariant, setSelectionRange, toArray } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/tag/tag-input.tsx
+const TagName = "input";
+const DEFAULT_DELIMITER = [
+	"\n",
+	";",
+	",",
+	/\s/
+];
+function getDelimiters(delimiter, defaultDelimiter = DEFAULT_DELIMITER) {
+	const finalDelimiter = delimiter === void 0 ? defaultDelimiter : delimiter;
+	if (!finalDelimiter) return [];
+	return toArray(finalDelimiter);
+}
+function splitValueByDelimiter(value, delimiters) {
+	for (const delimiter of delimiters) {
+		let match = value.match(delimiter);
+		while (match?.index === 0) {
+			value = value.slice(match[0].length);
+			match = value.match(delimiter);
+		}
+		if (!match) continue;
+		return value.split(delimiter);
+	}
+	return [];
+}
+/**
+* Returns props to create a `TagInput` component.
+* @see https://ariakit.com/components/tag
+* @example
+* ```jsx
+* const props = useTagInput();
+* <Role.input {...props} />
+* ```
+*/
+const useTagInput = createHook(function useTagInput({ store, tabbable = true, delimiter, addValueOnPaste = true, addValueOnChange = true, setValueOnChange = true, removeOnBackspace = true, ...props }) {
+	const context = useTagContext();
+	store = store || context;
+	invariant(store, "TagInput must receive a `store` prop or be wrapped in a TagProvider component.");
+	const value = useStoreState(store, "value");
+	const onPasteProp = props.onPaste;
+	const addValueOnPasteProp = useBooleanEvent(addValueOnPaste);
+	const onPaste = useEvent((event) => {
+		onPasteProp?.(event);
+		if (event.defaultPrevented) return;
+		const text = event.clipboardData.getData("text");
+		const delimiters = getDelimiters(delimiter);
+		const values = splitValueByDelimiter(text.trim(), delimiters).map((value) => value.trim()).filter((value) => value !== "");
+		if (!addValueOnPasteProp(Object.assign(event, { values }))) return;
+		if (!values.length) return;
+		event.preventDefault();
+		for (const tagValue of values) store.addValue(tagValue);
+	});
+	const onChangeProp = props.onChange;
+	const setValueOnChangeProp = useBooleanEvent(setValueOnChange);
+	const addValueOnChangeProp = useBooleanEvent(addValueOnChange);
+	const onChange = useEvent((event) => {
+		onChangeProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		const { value: prevValue } = store.getState();
+		const inputType = getInputType(event);
+		const currentTarget = event.currentTarget;
+		const { start, end } = getTextboxSelection(currentTarget);
+		const { value } = currentTarget;
+		if (setValueOnChangeProp(event)) UndoManager.execute(() => {
+			store.setValue(value);
+			queueMicrotask(() => {
+				setSelectionRange(currentTarget, start, end);
+			});
+			if (value === prevValue) return;
+			return () => store.setValue(prevValue);
+		}, inputType);
+		if (start === end && start === value.length) {
+			let values = splitValueByDelimiter(value, getDelimiters(delimiter));
+			const trailingvalue = values.pop() || "";
+			values = values.map((value) => value.trim()).filter((value) => value !== "");
+			const eventWithValues = Object.assign(event, { values });
+			if (values.length && addValueOnChangeProp(eventWithValues)) {
+				event.preventDefault();
+				for (const tagValue of values) store.addValue(tagValue);
+				UndoManager.execute(() => {
+					store.setValue(trailingvalue);
+					if (trailingvalue === prevValue) return;
+					return () => store.setValue(prevValue);
+				}, inputType);
+			}
+		}
+	});
+	const onKeyDownProp = props.onKeyDown;
+	const removeOnBackspaceProp = useBooleanEvent(removeOnBackspace);
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Backspace" && removeOnBackspaceProp(event)) {
+			const { start, end } = getTextboxSelection(event.currentTarget);
+			if (!(start === end && start === 0)) return;
+			store.setValues((values) => {
+				if (!values.length) return values;
+				return values.slice(0, -1);
+			});
+		}
+	});
+	props = {
+		value,
+		...props,
+		ref: useMergeRefs(store.setInputElement, props.ref),
+		onPaste,
+		onChange,
+		onKeyDown
+	};
+	props = useCompositeItem({
+		store,
+		tabbable,
+		...props
+	});
+	return props;
+});
+/**
+* Renders an input element within a
+* [`TagList`](https://ariakit.com/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.com/reference/tag-input#delimiter) prop.
+*
+* This component can be combined with a
+* [`Combobox`](https://ariakit.com/reference/combobox) component using the
+* [`render`](https://ariakit.com/reference/tag-input#render) prop to create a
+* tag input with suggestions.
+* @see https://ariakit.com/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>
+* ```
+*/
+const TagInput = forwardRef(function TagInput(props) {
+	return createElement(TagName, useTagInput(props));
+});
+//#endregion
+export { TagInput, useTagInput };
+
+//# sourceMappingURL=tag-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-input.js","names":[],"sources":["../../src/tag/tag-input.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  toArray,\n  getTextboxSelection,\n  setSelectionRange,\n  getInputType,\n  invariant,\n  UndoManager,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type {\n  ChangeEvent,\n  ClipboardEvent,\n  ElementType,\n  KeyboardEvent,\n  SyntheticEvent,\n} from \"react\";\nimport type { CompositeItemOptions } from \"../composite/composite-item.tsx\";\nimport { useCompositeItem } from \"../composite/composite-item.tsx\";\nimport { useTagContext } from \"./tag-context.tsx\";\nimport type { TagStore } from \"./tag-store.ts\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\ntype EventWithValues<T extends SyntheticEvent> = T & {\n  values: string[];\n};\n\nconst DEFAULT_DELIMITER = [\"\\n\", \";\", \",\", /\\s/];\n\nfunction getDelimiters(\n  delimiter: TagInputOptions[\"delimiter\"],\n  defaultDelimiter: TagInputOptions[\"delimiter\"] = DEFAULT_DELIMITER,\n) {\n  const finalDelimiter = delimiter === undefined ? defaultDelimiter : delimiter;\n  if (!finalDelimiter) return [];\n  return toArray(finalDelimiter);\n}\n\nfunction splitValueByDelimiter(value: string, delimiters: (string | RegExp)[]) {\n  for (const delimiter of delimiters) {\n    let match = value.match(delimiter);\n    // Remove delimiter from the start of the string\n    while (match?.index === 0) {\n      value = value.slice(match[0].length);\n      match = value.match(delimiter);\n    }\n    if (!match) continue;\n    return value.split(delimiter);\n  }\n  return [];\n}\n\n/**\n * Returns props to create a `TagInput` component.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx\n * const props = useTagInput();\n * <Role.input {...props} />\n * ```\n */\nexport const useTagInput = createHook<TagName, TagInputOptions>(\n  function useTagInput({\n    store,\n    tabbable = true,\n    delimiter,\n    addValueOnPaste = true,\n    addValueOnChange = true,\n    setValueOnChange = true,\n    removeOnBackspace = true,\n    ...props\n  }) {\n    const context = useTagContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TagInput must receive a `store` prop or be wrapped in a TagProvider component.\",\n    );\n\n    const value = useStoreState(store, \"value\");\n\n    const onPasteProp = props.onPaste;\n    const addValueOnPasteProp = useBooleanEvent(addValueOnPaste);\n\n    const onPaste = useEvent((event: ClipboardEvent<HTMLType>) => {\n      onPasteProp?.(event);\n      if (event.defaultPrevented) return;\n      const text = event.clipboardData.getData(\"text\");\n      const delimiters = getDelimiters(delimiter);\n      const values = splitValueByDelimiter(text.trim(), delimiters)\n        .map((value) => value.trim())\n        .filter((value) => value !== \"\");\n      // Create a new event with the values extracted from the clipboard text so\n      // that the user can use the values in the event handler.\n      const eventWithValues = Object.assign(event, { values });\n      if (!addValueOnPasteProp(eventWithValues)) return;\n      if (!values.length) return;\n      // Prevent pasting the text into the input\n      event.preventDefault();\n      for (const tagValue of values) {\n        store.addValue(tagValue);\n      }\n    });\n\n    const onChangeProp = props.onChange;\n    const setValueOnChangeProp = useBooleanEvent(setValueOnChange);\n    const addValueOnChangeProp = useBooleanEvent(addValueOnChange);\n\n    const onChange = useEvent((event: ChangeEvent<HTMLType>) => {\n      onChangeProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!store) return;\n      const { value: prevValue } = store.getState();\n      const inputType = getInputType(event);\n      const currentTarget = event.currentTarget;\n      const { start, end } = getTextboxSelection(currentTarget);\n      const { value } = currentTarget;\n      // Set the value in the store if the value changes\n      if (setValueOnChangeProp(event)) {\n        void UndoManager.execute(() => {\n          store.setValue(value);\n          // When the value is not set synchronously, the selection range may be\n          // lost.\n          queueMicrotask(() => {\n            setSelectionRange(currentTarget, start, end);\n          });\n          if (value === prevValue) return;\n          return () => store.setValue(prevValue);\n        }, inputType);\n      }\n      // Add values to the store if the input value ends with a delimiter\n      const isTrailingCaret = start === end && start === value.length;\n      if (isTrailingCaret) {\n        const delimiters = getDelimiters(delimiter);\n        // Split values and get the trailing value that will remain in the input\n        let values = splitValueByDelimiter(value, delimiters);\n        const trailingvalue = values.pop() || \"\";\n        values = values\n          .map((value) => value.trim())\n          .filter((value) => value !== \"\");\n        const eventWithValues = Object.assign(event, { values });\n        if (values.length && addValueOnChangeProp(eventWithValues)) {\n          // We need to prevent the default behavior here in case the tag input\n          // component is combined with another component that also listens to the\n          // change event and updates the store value, such as Combobox. In this\n          // case, the tag input logic should take precedence even if this event\n          // handler is called first.\n          event.preventDefault();\n          for (const tagValue of values) {\n            store.addValue(tagValue);\n          }\n          void UndoManager.execute(() => {\n            store.setValue(trailingvalue);\n            if (trailingvalue === prevValue) return;\n            return () => store.setValue(prevValue);\n          }, inputType);\n        }\n      }\n    });\n\n    const onKeyDownProp = props.onKeyDown;\n    const removeOnBackspaceProp = useBooleanEvent(removeOnBackspace);\n\n    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n      if (event.key === \"Backspace\" && removeOnBackspaceProp(event)) {\n        const { start, end } = getTextboxSelection(event.currentTarget);\n        const isLeadingCaret = start === end && start === 0;\n        if (!isLeadingCaret) return;\n        store.setValues((values) => {\n          if (!values.length) return values;\n          return values.slice(0, -1);\n        });\n      }\n    });\n\n    props = {\n      value,\n      ...props,\n      ref: useMergeRefs(store.setInputElement, props.ref),\n      onPaste,\n      onChange,\n      onKeyDown,\n    };\n\n    props = useCompositeItem<TagName>({ store, tabbable, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders an input element within a\n * [`TagList`](https://ariakit.com/reference/tag-list) component. This component\n * lets users input tag values that are added to the store when the input value\n * changes or when the user pastes text into the input element, based on the\n * [`delimiter`](https://ariakit.com/reference/tag-input#delimiter) prop.\n *\n * This component can be combined with a\n * [`Combobox`](https://ariakit.com/reference/combobox) component using the\n * [`render`](https://ariakit.com/reference/tag-input#render) prop to create a\n * tag input with suggestions.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx {14}\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 TagInput = forwardRef(function TagInput(props: TagInputProps) {\n  const htmlProps = useTagInput(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TagInputOptions<\n  T extends ElementType = TagName,\n> extends CompositeItemOptions<T> {\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 string or pattern employed to break the input value into multiple tags.\n   * This could be a string, a regular expression, an array of strings and\n   * regular expressions, or `null` to prevent splitting on input.\n   *\n   * When an array is given, the input value is split by the first matching\n   * delimiter. All other delimiters are disregarded for the same input event.\n   * For example, if the delimiters are `[\"\\n\", \",\"]` and the user pastes text\n   * containing commas and newlines, the text will be split solely by newlines.\n   * The commas will be preserved in the tag values. If you want to split by\n   * both commas and newlines, you should use a regular expression that matches\n   * both characters (e.g., `/[\\n,]/`).\n   * @default [\"\\n\", \";\", \",\", /\\s/]\n   */\n  delimiter?: string | RegExp | null | (string | RegExp)[];\n  /**\n   * Determines if tag values should be added to the store when the input value\n   * is pasted. The values are extracted from the clipboard text and\n   * automatically processed with the\n   * [`delimiter`](https://ariakit.com/reference/tag-input#delimiter) prop.\n   *\n   * This can be either a boolean or a callback that receives an event with an\n   * extra `values` property and should return a boolean.\n   * @default true\n   */\n  addValueOnPaste?: BooleanOrCallback<\n    EventWithValues<ClipboardEvent<HTMLElement>>\n  >;\n  /**\n   * Determines if the tag value should be added to the store when the input\n   * value changes. The tag value is automatically processed with the\n   * [`delimiter`](https://ariakit.com/reference/tag-input#delimiter) prop.\n   *\n   * This can be either a boolean or a callback that receives an event with an\n   * extra `values` property and should return a boolean.\n   * @default true\n   */\n  addValueOnChange?: BooleanOrCallback<\n    EventWithValues<ChangeEvent<HTMLElement>>\n  >;\n  /**\n   * Whether the tag\n   * [`value`](https://ariakit.com/reference/tag-provider#value) state\n   * should be updated when the input value changes. This is useful if you want\n   * to customize how the store\n   * [`value`](https://ariakit.com/reference/tag-provider#value) is updated\n   * based on the input element's value.\n   * @default true\n   */\n  setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;\n  /**\n   * Determines whether the last tag value should be removed from the store when\n   * the `Backspace` key is pressed and the cursor is at the start of the input\n   * value.\n   * @default true\n   */\n  removeOnBackspace?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;\n  /**\n   * @default true\n   */\n  tabbable?: CompositeItemOptions<T>[\"tabbable\"];\n}\n\nexport type TagInputProps<T extends ElementType = TagName> = Props<\n  T,\n  TagInputOptions<T>\n>;\n"],"mappings":"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"}

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

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

package/dist/tag/tag-list-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-list-label.d.ts","names":["Props","ElementType","CompositeOptions","TagStore","TagName","useTagListLabel","TagListLabelOptions","Hook","TagListLabel","TagListLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/tag/tag-list-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AAD0B,cAY1BC,eAAAA,iCAAgDE,IAAAA,UAAcD,mBAAmB;AAAtG;;;;AAAsG;AA2BtG;;;;;;;;;AAAiJ;AACjJ;;;;;;;;;;;AA5BA,cA2BqBE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC3GN,mBAAAA,WAA8BL,WAAAA,GAAcG,OAAAA,UAAiBF,gBAAAA,CAAiBW,CAAAA;EAAjBX;;;;;AAQ1D;AAEpB;EAFIY,KAAAA,GAAQX,QAAAA;AAAAA;AAAAA,KAEAM,iBAAAA,WAA4BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,mBAAAA,CAAoBO,CAAAA"}

package/dist/tag/tag-list-label.js

@@ -0,0 +1,62 @@
+"use client";
+import { useTagContext } from "./tag-context.js";
+import { createElement, createHook, forwardRef, useId, useMergeRefs } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/tag/tag-list-label.tsx
+const TagName = "label";
+/**
+* Returns props to create a `TagListLabel` component.
+* @see https://ariakit.com/components/tag
+* @example
+* ```jsx
+* const props = useTagListLabel();
+* <Role.label {...props} />
+* ```
+*/
+const useTagListLabel = createHook(function useTagListLabel({ store, ...props }) {
+	const context = useTagContext();
+	store = store || context;
+	invariant(store, "TagListLabel must receive a `store` prop or be wrapped in a TagProvider component.");
+	const id = useId(props.id);
+	props = {
+		htmlFor: useStoreState(store, (state) => state.inputElement?.id),
+		...props,
+		id,
+		ref: useMergeRefs(store.setLabelElement, props.ref)
+	};
+	return props;
+});
+/**
+* Renders a label element for the
+* [`TagInput`](https://ariakit.com/reference/tag-input) and also acts as the
+* accessible name for the listbox element rendered by
+* [`TagList`](https://ariakit.com/reference/tag-list).
+* @see https://ariakit.com/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>
+* ```
+*/
+const TagListLabel = forwardRef(function TagListLabel(props) {
+	return createElement(TagName, useTagListLabel(props));
+});
+//#endregion
+export { TagListLabel, useTagListLabel };
+
+//# sourceMappingURL=tag-list-label.js.map

package/dist/tag/tag-list-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-list-label.js","names":[],"sources":["../../src/tag/tag-list-label.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useId,\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeOptions } from \"../composite/composite.tsx\";\nimport { useTagContext } from \"./tag-context.tsx\";\nimport type { TagStore } from \"./tag-store.ts\";\n\nconst TagName = \"label\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `TagListLabel` component.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx\n * const props = useTagListLabel();\n * <Role.label {...props} />\n * ```\n */\nexport const useTagListLabel = createHook<TagName, TagListLabelOptions>(\n  function useTagListLabel({ store, ...props }) {\n    const context = useTagContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TagListLabel must receive a `store` prop or be wrapped in a TagProvider component.\",\n    );\n\n    const id = useId(props.id);\n    const htmlFor = useStoreState(store, (state) => state.inputElement?.id);\n\n    props = {\n      htmlFor,\n      ...props,\n      id,\n      ref: useMergeRefs(store.setLabelElement, props.ref),\n    };\n\n    return props;\n  },\n);\n\n/**\n * Renders a label element for the\n * [`TagInput`](https://ariakit.com/reference/tag-input) and also acts as the\n * accessible name for the listbox element rendered by\n * [`TagList`](https://ariakit.com/reference/tag-list).\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx {2}\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 TagListLabel = forwardRef(function TagListLabel(\n  props: TagListLabelProps,\n) {\n  const htmlProps = useTagListLabel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TagListLabelOptions<\n  T extends ElementType = TagName,\n> extends CompositeOptions<T> {\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\nexport type TagListLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  TagListLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;MA6BI,kBAAgB,WAAc,SAAA,gBAAA,EAAA,OAAA,GAAA,SAAA;CAC9B,MAAA,UAAQ,cAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAW,oFAAQ;CAGzB,MAAA,KAAQ,MAAA,MAAA,EAAA;SACN;EACA,SAAG,cAAA,QAAA,UAAA,MAAA,cAAA,EAAA;EACH,GAAA;EACA;EACF,KAAA,aAAA,MAAA,iBAAA,MAAA,GAAA;CAEA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgCE,eAAO,WADW,SAAA,aACqB,OAAA;CACxC,OAAA,cAAA,SAAA,gBAAA,KAAA,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-list.d.ts","names":["Props","ElementType","CompositeOptions","TagStore","TagName","useTagList","TagListOptions","Hook","TagList","TagListProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/tag/tag-list.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AAD0B,cAY1BC,UAAAA,iCAA2CE,IAAAA,QAAYD,cAAc;AAA1F;;;;AAA0F;AA8B1F;;;;;;;;;AAAuI;AACvI;;;;;;;;;;;;;;AA/BA,cA8BqBE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACjGN,cAAAA,WAAyBL,WAAAA,GAAcG,OAAAA,UAAiBF,gBAAAA,CAAiBW,CAAAA;EAQ9EV;;AAAQ;AAEpB;;;;EAFIW,KAAAA,GAAQX,QAAAA;AAAAA;AAAAA,KAEAM,YAAAA,WAAuBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,cAAAA,CAAeO,CAAAA"}

package/dist/tag/tag-list.js

@@ -0,0 +1,127 @@
+"use client";
+import { TagScopedContextProvider, useTagProviderContext } from "./tag-context.js";
+import { useComposite } from "../composite/composite.js";
+import { useTouchDevice } from "./utils.js";
+import { createElement, createHook, forwardRef, useEvent, useWrapElement } from "@ariakit/react-utils";
+import { UndoManager, getClosestFocusable, invariant, isApple, queueBeforeEvent } from "@ariakit/utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/tag/tag-list.tsx
+const TagName = "div";
+/**
+* Returns props to create a `TagList` component.
+* @see https://ariakit.com/components/tag
+* @example
+* ```jsx
+* const props = useTagList();
+* <Role.div {...props} />
+* ```
+*/
+const useTagList = createHook(function useTagList({ store, ...props }) {
+	const context = useTagProviderContext();
+	store = store || context;
+	invariant(store, "TagList must receive a `store` prop or be wrapped in a TagProvider component.");
+	const onMouseDownProp = props.onMouseDown;
+	const onMouseDown = useEvent((event) => {
+		onMouseDownProp?.(event);
+		if (event.defaultPrevented) return;
+		const target = event.target;
+		const currentTarget = event.currentTarget;
+		const focusableTarget = getClosestFocusable(target);
+		if (!(focusableTarget === currentTarget) && currentTarget.contains(focusableTarget)) return;
+		const { inputElement } = store.getState();
+		queueBeforeEvent(event.currentTarget, "mouseup", () => {
+			inputElement?.focus();
+		});
+	});
+	const onKeyDownProp = props.onKeyDown;
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (event.defaultPrevented) return;
+		const pc = !isApple();
+		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();
+			UndoManager.redo();
+		} else if (mod && z) {
+			event.preventDefault();
+			UndoManager.undo();
+		}
+	});
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(TagScopedContextProvider, {
+		value: store,
+		children: element
+	}), [store]);
+	props = {
+		...props,
+		onMouseDown,
+		onKeyDown
+	};
+	props = useComposite({
+		store,
+		...props
+	});
+	const orientation = useStoreState(store, (state) => state.orientation === "both" ? void 0 : state.orientation);
+	const itemIds = useStoreState(store, (state) => state.renderedItems).filter((item) => !!item.value).map((item) => item.id);
+	const labelId = useStoreState(store, (state) => state.labelElement?.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 children = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		role: useTouchDevice() ? "list" : "listbox",
+		"aria-live": "polite",
+		"aria-relevant": "all",
+		"aria-atomic": true,
+		"aria-labelledby": listboxProps["aria-label"] != null ? void 0 : labelId,
+		"aria-orientation": orientation,
+		"aria-owns": itemIds.join(" "),
+		...listboxProps,
+		style: { position: "fixed" }
+	}), props.children] });
+	props = {
+		...props,
+		children
+	};
+	return props;
+});
+/**
+* Renders a wrapper for [`Tag`](https://ariakit.com/reference/tag) and
+* [`TagInput`](https://ariakit.com/reference/tag-input) components. This
+* component is typically styled as an input field.
+*
+* The [`TagListLabel`](https://ariakit.com/reference/tag-list-label) component
+* can be used to provide an accessible name for the listbox element that owns
+* the tags.
+* @see https://ariakit.com/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>
+* ```
+*/
+const TagList = forwardRef(function TagList(props) {
+	return createElement(TagName, useTagList(props));
+});
+//#endregion
+export { TagList, useTagList };
+
+//# sourceMappingURL=tag-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-list.js","names":[],"sources":["../../src/tag/tag-list.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  queueBeforeEvent,\n  getClosestFocusable,\n  invariant,\n  isApple,\n  UndoManager,\n} from \"@ariakit/utils\";\nimport type { ElementType, KeyboardEvent, MouseEvent } from \"react\";\nimport type { CompositeOptions } from \"../composite/composite.tsx\";\nimport { useComposite } from \"../composite/composite.tsx\";\nimport {\n  TagScopedContextProvider,\n  useTagProviderContext,\n} from \"./tag-context.tsx\";\nimport type { TagStore } from \"./tag-store.ts\";\nimport { useTouchDevice } from \"./utils.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `TagList` component.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx\n * const props = useTagList();\n * <Role.div {...props} />\n * ```\n */\nexport const useTagList = createHook<TagName, TagListOptions>(\n  function useTagList({ store, ...props }) {\n    const context = useTagProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TagList must receive a `store` prop or be wrapped in a TagProvider component.\",\n    );\n\n    const onMouseDownProp = props.onMouseDown;\n\n    // Focus on the input element when clicking on the tag list.\n    const onMouseDown = useEvent((event: MouseEvent<HTMLType>) => {\n      onMouseDownProp?.(event);\n      if (event.defaultPrevented) return;\n      const target = event.target as HTMLElement;\n      const currentTarget = event.currentTarget;\n      const focusableTarget = getClosestFocusable(target);\n      const isSelfFocusable = focusableTarget === currentTarget;\n      // If the user clicked on an element that's already focusable, don't focus\n      // the input element.\n      if (!isSelfFocusable && currentTarget.contains(focusableTarget)) return;\n      const { inputElement } = store.getState();\n      // We can't immediately focus on mousedown, otherwise the input element\n      // will lose focus to the body as an effect of the mousedown event.\n      queueBeforeEvent(event.currentTarget, \"mouseup\", () => {\n        inputElement?.focus();\n      });\n    });\n\n    const onKeyDownProp = props.onKeyDown;\n\n    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n      const pc = !isApple();\n      const z = event.key === \"z\" || event.key === \"Z\";\n      const mod = pc ? event.ctrlKey : event.metaKey;\n      const shiftZ = (event.shiftKey && z) || (pc && event.key === \"y\");\n      if (mod && shiftZ) {\n        event.preventDefault();\n        void UndoManager.redo();\n      } else if (mod && z) {\n        event.preventDefault();\n        void UndoManager.undo();\n      }\n    });\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <TagScopedContextProvider value={store}>\n          {element}\n        </TagScopedContextProvider>\n      ),\n      [store],\n    );\n\n    props = {\n      ...props,\n      onMouseDown,\n      onKeyDown,\n    };\n\n    props = useComposite({ store, ...props });\n\n    const orientation = useStoreState(store, (state) =>\n      state.orientation === \"both\" ? undefined : state.orientation,\n    );\n    const items = useStoreState(store, (state) => state.renderedItems);\n    const itemIds = items.filter((item) => !!item.value).map((item) => item.id);\n    const labelId = useStoreState(store, (state) => state.labelElement?.id);\n\n    // Remove aria attributes from tha TagList element and add them to a\n    // separate div that will serve as the accessible listbox element.\n    const listboxProps: typeof props = {};\n    for (const key in props) {\n      if (key === \"role\" || key.startsWith(\"aria-\")) {\n        const prop = key as keyof typeof props;\n        listboxProps[prop] = props[prop];\n        delete props[prop];\n      }\n    }\n\n    const touchDevice = useTouchDevice();\n\n    // We can't render TagList as a listbox because it may include an input\n    // (textbox) for styling purposes (it must be a sibling of the tags). The\n    // listbox role accepts only options as children, so we render a separate\n    // listbox element using aria-owns to reference the options.\n    const children = (\n      <>\n        <div\n          role={touchDevice ? \"list\" : \"listbox\"}\n          aria-live=\"polite\"\n          aria-relevant=\"all\"\n          aria-atomic\n          aria-labelledby={\n            listboxProps[\"aria-label\"] != null ? undefined : labelId\n          }\n          aria-orientation={orientation}\n          aria-owns={itemIds.join(\" \")}\n          {...listboxProps}\n          style={{ position: \"fixed\" }}\n        />\n        {props.children}\n      </>\n    );\n\n    props = {\n      ...props,\n      children,\n    };\n\n    return props;\n  },\n);\n\n/**\n * Renders a wrapper for [`Tag`](https://ariakit.com/reference/tag) and\n * [`TagInput`](https://ariakit.com/reference/tag-input) components. This\n * component is typically styled as an input field.\n *\n * The [`TagListLabel`](https://ariakit.com/reference/tag-list-label) component\n * can be used to provide an accessible name for the listbox element that owns\n * the tags.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx {3-15}\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 TagList = forwardRef(function TagList(props: TagListProps) {\n  const htmlProps = useTagList(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TagListOptions<\n  T extends ElementType = TagName,\n> extends CompositeOptions<T> {\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\nexport type TagListProps<T extends ElementType = TagName> = Props<\n  T,\n  TagListOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;MAyCI,aAAgB,WAAA,SAAsB,WAAA,EAAA,OAAA,GAAA,SAAA;CACtC,MAAA,UAAQ,sBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,+EAAwB;CAG9B,MAAM,kBAAc,MAAU;OAC5B,cAAkB,UAAK,UAAA;EACvB,kBAAU,KAAA;EACV,IAAA,MAAM,kBAAe;EACrB,MAAM,SAAA,MAAA;EACN,MAAM,gBAAA,MAAkB;EAIxB,MAHwB,kBAAA,oBAGA,MAAA;EACxB,IAAA,EAAM,oBAAmB,kBAAe,cAAA,SAAA,eAAA,GAAA;EAGxC,MAAA,EAAA,iBAAuB,MAAA,SAAe;mBACtB,MAAM,eAAA,iBAAA;GACrB,cAAA,MAAA;EACF,CAAA;CAED,CAAA;CAEA,MAAM,gBAAY,MAAU;OAC1B,YAAgB,UAAK,UAAA;EACrB,gBAAU,KAAA;EACV,IAAA,MAAM,kBAAc;EACpB,MAAM,KAAI,CAAA,QAAM;EAChB,MAAM,IAAA,MAAM,QAAW,OAAA,MAAU,QAAM;EACvC,MAAM,MAAA,KAAU,MAAM,UAAY,MAAO;EACzC,MAAI,SAAO,MAAQ,YAAA,KAAA,MAAA,MAAA,QAAA;MACjB,OAAM,QAAA;GACN,MAAK,eAAiB;GACxB,YAAW,KAAO;SACV,IAAA,OAAA,GAAA;GACN,MAAK,eAAiB;GACxB,YAAA,KAAA;EACD;CAED,CAAA;SAGqC,eAAA,QAAA,YAAA,oBAAA,0BAAA;;EAEP,UAG9B;CAEA,CAAA,GAAA,CAAA,KAAQ,CAAA;SACH;EACH,GAAA;EACA;EACF;CAEA;SAAuB,aAAA;EAAO;EAAU,GAAA;CAExC,CAAA;CAIA,MAAM,cADQ,cAAc,QAAQ,UAAU,MAAM,gBAC9B,SAAQ,KAAW,IAAA,MAAU,WAAO;CAC1D,MAAM,UAAU,cAAc,QAAQ,UAAU,MAAM,aAAA,EAAc,QAAE,SAAA,CAAA,CAAA,KAAA,KAAA,EAAA,KAAA,SAAA,KAAA,EAAA;CAItE,MAAM,UAAA,cAA8B,QAAA,UAAA,MAAA,cAAA,EAAA;CACpC,MAAK,eAAa,CAAA;MAEd,MAAM,OAAO,OAAA,IAAA,QAAA,UAAA,IAAA,WAAA,OAAA,GAAA;EACb,MAAA,OAAa;EACb,aAAa,QAAA,MAAA;EACf,OAAA,MAAA;CASF;OAGM,WAAoB,qBAAS,UAAA,EAAA,UAAA,CAAA,oBAAA,OAAA;EAC7B,MAAA,eAAU,IAAA,SAAA;EACV,aAAA;EACA,iBAAA;EACA,eAAA;EAGA,mBAAA,aAAkB,iBAAA,OAAA,KAAA,IAAA;EAClB,oBAAW;EACX,aAAI,QAAA,KAAA,GAAA;EACJ,GAAA;EACD,OACA,EAAM,UACP,QAAA;CAGJ,CAAA,GAAA,MAAQ,QAAA,EAAA,CAAA;SACH;EACH,GAAA;EACF;CAEA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiCE,UAAO,WAAc,SADH,QAAW,OACU;CACxC,OAAA,cAAA,SAAA,WAAA,KAAA,CAAA"}

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

@@ -0,0 +1,34 @@
+import { a as TagStoreProps } from "../tag-store-xANOvuGo.js";
+import { ReactNode } from "react";
+
+//#region src/tag/tag-provider.d.ts
+/**
+ * Provides a tag store to [Tag](https://ariakit.com/components/tag) components.
+ * @see https://ariakit.com/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>
+ * ```
+ */
+declare function TagProvider(props?: TagProviderProps): import("react/jsx-runtime").JSX.Element;
+interface TagProviderProps extends TagStoreProps {
+  children?: ReactNode;
+}
+//#endregion
+export { TagProvider, TagProviderProps };
+//# sourceMappingURL=tag-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-provider.d.ts","names":["ReactNode","TagStoreProps","TagProvider","TagProviderProps","props","JSX","Element","children"],"sources":["../../src/tag/tag-provider.d.ts"],"mappings":";;;;;;AAyBA;;;;;;;;;AAAsG;AACtG;;;;;;;;AACwB;;;iBAFAE,WAAAA,CAAYE,KAAAA,GAAQD,gBAAgB,+BAA+BE,GAAAA,CAAIC,OAAAA;AAAAA,UAC9EH,gBAAAA,SAAyBF,aAAa;EACnDM,QAAAA,GAAWP,SAAAA;AAAAA"}

package/dist/tag/tag-provider.js

@@ -0,0 +1,38 @@
+"use client";
+import { TagContextProvider } from "./tag-context.js";
+import { useTagStore } from "./tag-store.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/tag/tag-provider.tsx
+/**
+* Provides a tag store to [Tag](https://ariakit.com/components/tag) components.
+* @see https://ariakit.com/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>
+* ```
+*/
+function TagProvider(props = {}) {
+	return /* @__PURE__ */ jsx(TagContextProvider, {
+		value: useTagStore(props),
+		children: props.children
+	});
+}
+//#endregion
+export { TagProvider };
+
+//# sourceMappingURL=tag-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-provider.js","names":[],"sources":["../../src/tag/tag-provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { TagContextProvider } from \"./tag-context.tsx\";\nimport type { TagStoreProps } from \"./tag-store.ts\";\nimport { useTagStore } from \"./tag-store.ts\";\n\n/**\n * Provides a tag store to [Tag](https://ariakit.com/components/tag) components.\n * @see https://ariakit.com/components/tag\n * @example\n * ```jsx\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 TagProvider(props: TagProviderProps = {}) {\n  const store = useTagStore(props);\n  return (\n    <TagContextProvider value={store}>{props.children}</TagContextProvider>\n  );\n}\n\nexport interface TagProviderProps extends TagStoreProps {\n  children?: ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;SA+BI,YAAA,QAAC,CAAA,GAAA;QAFuB,oBAEO,oBAAA;qBAAU,KAAA;EAA6B,UAAA,MAAA;CAE1E,CAAA"}