@ariakit/react-components 0.1.0 → 0.1.2

package/dist/tab/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","names":[],"sources":["../../src/tab/tab-panel.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useId,\n  useMergeRefs,\n  useSafeLayoutEffect,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getAllTabbableIn, invariant } from \"@ariakit/utils\";\nimport type { ElementType, KeyboardEvent, RefObject } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport type { DisclosureContentOptions } from \"../disclosure/disclosure-content.tsx\";\nimport { useDisclosureContent } from \"../disclosure/disclosure-content.tsx\";\nimport { useDisclosureStore } from \"../disclosure/disclosure-store.ts\";\nimport type { FocusableOptions } from \"../focusable/focusable.tsx\";\nimport { useFocusable } from \"../focusable/focusable.tsx\";\nimport {\n  TabScopedContextProvider,\n  useTabProviderContext,\n} from \"./tab-context.tsx\";\nimport type { TabStore } from \"./tab-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `TabPanel` component.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx\n * const store = useTabStore();\n * const props = useTabPanel({ store });\n * <TabList store={store}>\n *   <Tab>Tab 1</Tab>\n * </TabList>\n * <Role {...props}>Panel 1</Role>\n * ```\n */\nexport const useTabPanel = createHook<TagName, TabPanelOptions>(\n  function useTabPanel({\n    store,\n    unmountOnHide,\n    tabId: tabIdProp,\n    getItem: getItemProp,\n    scrollRestoration,\n    scrollElement,\n    ...props\n  }) {\n    const context = useTabProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TabPanel must receive a `store` prop or be wrapped in a TabProvider component.\",\n    );\n\n    const ref = useRef<HTMLType>(null);\n    const id = useId(props.id);\n\n    const tabId = useStoreState(\n      store.panels,\n      () => tabIdProp || store?.panels.item(id)?.tabId,\n    );\n    const open = useStoreState(\n      store,\n      (state) => !!tabId && state.selectedId === tabId,\n    );\n\n    const disclosure = useDisclosureStore({ open });\n    const mounted = useStoreState(disclosure, \"mounted\");\n\n    // Store the scroll position for each tabId. The component may receive\n    // different tab ids if it's a single tab panel with dynamic tab id and\n    // content.\n    const scrollPositionRef = useRef(\n      new Map<string, { x: number; y: number }>(),\n    );\n\n    const getScrollElement = useEvent(() => {\n      const panelElement = ref.current;\n      if (!panelElement) return null;\n      if (!scrollElement) return panelElement;\n      if (typeof scrollElement === \"function\") {\n        return scrollElement(panelElement);\n      }\n      if (\"current\" in scrollElement) {\n        return scrollElement.current;\n      }\n      return scrollElement;\n    });\n\n    // Adds scroll restoration behavior to the tab panel.\n    useEffect(() => {\n      if (!scrollRestoration) return;\n      if (!mounted) return;\n      const element = getScrollElement();\n      if (!element) return;\n      // If scrollRestoration is set to \"reset\", scroll to the top of the\n      // element and return early.\n      if (scrollRestoration === \"reset\") {\n        element.scroll(0, 0);\n        return;\n      }\n      if (!tabId) return;\n      const position = scrollPositionRef.current.get(tabId);\n      element.scroll(position?.x ?? 0, position?.y ?? 0);\n      // On scroll, save the scroll position for the current tab id.\n      const onScroll = () => {\n        scrollPositionRef.current.set(tabId, {\n          x: element.scrollLeft,\n          y: element.scrollTop,\n        });\n      };\n      element.addEventListener(\"scroll\", onScroll);\n      return () => {\n        element.removeEventListener(\"scroll\", onScroll);\n      };\n    }, [scrollRestoration, mounted, tabId, getScrollElement, store]);\n\n    const [hasTabbableChildren, setHasTabbableChildren] = useState(false);\n\n    // Re-check tabbable children each time the panel becomes visible so\n    // content rendered conditionally on tab selection is accounted for.\n    useSafeLayoutEffect(() => {\n      if (!mounted) return;\n      const element = ref.current;\n      if (!element) return;\n      setHasTabbableChildren(!!getAllTabbableIn(element).length);\n    }, [mounted]);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, id: id || item.id, tabId: tabIdProp };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, tabIdProp, getItemProp],\n    );\n\n    const onKeyDownProp = props.onKeyDown;\n\n    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!store?.composite) return;\n      const keyMap = {\n        ArrowLeft: store.previous,\n        ArrowRight: store.next,\n        Home: store.first,\n        End: store.last,\n      };\n      const action = keyMap[event.key as keyof typeof keyMap];\n      if (!action) return;\n      const { selectedId } = store.getState();\n      const nextId = action({ activeId: selectedId });\n      if (!nextId) return;\n      event.preventDefault();\n      store.move(nextId);\n    });\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <TabScopedContextProvider value={store}>\n          {element}\n        </TabScopedContextProvider>\n      ),\n      [store],\n    );\n\n    props = {\n      role: \"tabpanel\",\n      \"aria-labelledby\":\n        props[\"aria-label\"] != null ? undefined : tabId || undefined,\n      ...props,\n      id,\n      children: unmountOnHide && !mounted ? null : props.children,\n      ref: useMergeRefs(ref, props.ref),\n      onKeyDown,\n    };\n\n    props = useFocusable({\n      // If the tab panel is rendered as part of another composite widget such\n      // as combobox, it should not be focusable.\n      focusable: !store.composite && !hasTabbableChildren,\n      ...props,\n    });\n    props = useDisclosureContent({ store: disclosure, ...props });\n    props = useCollectionItem({ store: store.panels, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a tab panel element that's controlled by a\n * [`Tab`](https://ariakit.com/reference/tab) component.\n *\n * If the [`tabId`](https://ariakit.com/reference/tab-panel#tabid) prop isn't\n * provided, the tab panel will automatically associate with a\n * [`Tab`](https://ariakit.com/reference/tab) based on its position in the DOM.\n * Alternatively, you can render a single tab panel with a dynamic\n * [`tabId`](https://ariakit.com/reference/tab-panel#tabid) value pointing to\n * the selected tab.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx {6,7}\n * <TabProvider>\n *   <TabList>\n *     <Tab>Tab 1</Tab>\n *     <Tab>Tab 2</Tab>\n *   </TabList>\n *   <TabPanel>Panel 1</TabPanel>\n *   <TabPanel>Panel 2</TabPanel>\n * </TabProvider>\n * ```\n */\nexport const TabPanel = forwardRef(function TabPanel(props: TabPanelProps) {\n  const htmlProps = useTabPanel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TabPanelOptions<T extends ElementType = TagName>\n  extends\n    FocusableOptions<T>,\n    CollectionItemOptions<T>,\n    Omit<DisclosureContentOptions<T>, \"store\"> {\n  /**\n   * Object returned by the\n   * [`useTabStore`](https://ariakit.com/reference/use-tab-store) hook. If not\n   * provided, the closest\n   * [`TabProvider`](https://ariakit.com/reference/tab-provider) component's\n   * context will be used.\n   */\n  store?: TabStore;\n  /**\n   * The [`id`](https://ariakit.com/reference/tab#id) of the tab controlling\n   * this panel. This connection is used to assign the `aria-labelledby`\n   * attribute to the tab panel and to determine if the tab panel should be\n   * visible.\n   *\n   * This link is automatically established by matching the order of\n   * [`Tab`](https://ariakit.com/reference/tab) and\n   * [`TabPanel`](https://ariakit.com/reference/tab-panel) elements in the DOM.\n   * If you're rendering a single tab panel, this can be set to a dynamic value\n   * that refers to the selected tab.\n   *\n   * Live examples:\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * - [Tab with React Router](https://ariakit.com/examples/tab-react-router)\n   * - [Animated TabPanel](https://ariakit.com/examples/tab-panel-animated)\n   * - [Select with Combobox and\n   *   Tabs](https://ariakit.com/examples/select-combobox-tab)\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   */\n  tabId?: string | null;\n  /**\n   * Manages the scrolling behavior of the tab panel when it is hidden and then\n   * shown again.\n   *\n   * This is especially useful when using a single tab panel for multiple tabs,\n   * where you dynamically change the\n   * [`tabId`](https://ariakit.com/reference/tab-panel#tabid) prop and the\n   * panel's children, which would otherwise retain the current scroll position\n   * when switching tabs.\n   *\n   * When set to `true`, the component will save the scroll position and restore\n   * it when the panel is shown again. When set to `\"reset\"`, the scroll\n   * position will reset to the top when the panel is displayed again.\n   *\n   * The default scroll element is the tab panel itself. To scroll a different\n   * element, use the\n   * [`scrollElement`](https://ariakit.com/reference/tab-panel#scrollelement)\n   * prop.\n   * @default false\n   */\n  scrollRestoration?: boolean | \"reset\";\n  /**\n   * When using the\n   * [`scrollRestoration`](https://ariakit.com/reference/tab-panel#scrollrestoration)\n   * prop, the tab panel element serves as the default scroll element. You can\n   * use this prop to designate a different element for scrolling.\n   *\n   * If a function is provided, it will be called with the tab panel element as\n   * an argument. The function should return the element to scroll.\n   * @example\n   * ```jsx\n   * <TabPanel\n   *   scrollRestoration\n   *   scrollElement={(panel) => panel.querySelector(\".scrollable\")}\n   * />\n   * ```\n   */\n  scrollElement?:\n    | HTMLElement\n    | RefObject<HTMLElement | null>\n    | ((panel: HTMLElement) => HTMLElement | null);\n}\n\nexport type TabPanelProps<T extends ElementType = TagName> = Props<\n  T,\n  TabPanelOptions<T>\n>;\n"],"mappings":"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"}
+{"version":3,"file":"tab-panel.js","names":[],"sources":["../../src/tab/tab-panel.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useId,\n  useMergeRefs,\n  useSafeLayoutEffect,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getAllTabbableIn, invariant } from \"@ariakit/utils\";\nimport type { ElementType, KeyboardEvent, RefObject } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { CollectionItemOptions } from \"../collection/collection-item.tsx\";\nimport { useCollectionItem } from \"../collection/collection-item.tsx\";\nimport type { DisclosureContentOptions } from \"../disclosure/disclosure-content.tsx\";\nimport { useDisclosureContent } from \"../disclosure/disclosure-content.tsx\";\nimport { useDisclosureStore } from \"../disclosure/disclosure-store.ts\";\nimport type { FocusableOptions } from \"../focusable/focusable.tsx\";\nimport { useFocusable } from \"../focusable/focusable.tsx\";\nimport {\n  TabScopedContextProvider,\n  useTabProviderContext,\n} from \"./tab-context.tsx\";\nimport type { TabStore } from \"./tab-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `TabPanel` component.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx\n * const store = useTabStore();\n * const props = useTabPanel({ store });\n * <TabList store={store}>\n *   <Tab>Tab 1</Tab>\n * </TabList>\n * <Role {...props}>Panel 1</Role>\n * ```\n */\nexport const useTabPanel = createHook<TagName, TabPanelOptions>(\n  function useTabPanel({\n    store,\n    unmountOnHide,\n    tabId: tabIdProp,\n    getItem: getItemProp,\n    scrollRestoration,\n    scrollElement,\n    ...props\n  }) {\n    const context = useTabProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TabPanel must receive a `store` prop or be wrapped in a TabProvider component.\",\n    );\n\n    const ref = useRef<HTMLType>(null);\n    const id = useId(props.id);\n\n    const tabId = useStoreState(\n      store.panels,\n      () => tabIdProp || store?.panels.item(id)?.tabId,\n    );\n    const open = useStoreState(\n      store,\n      (state) => !!tabId && state.selectedId === tabId,\n    );\n\n    const disclosure = useDisclosureStore({ open });\n    const mounted = useStoreState(disclosure, \"mounted\");\n\n    // Store the scroll position for each tabId. The component may receive\n    // different tab ids if it's a single tab panel with dynamic tab id and\n    // content.\n    const scrollPositionRef = useRef(\n      new Map<string, { x: number; y: number }>(),\n    );\n\n    const getScrollElement = useEvent(() => {\n      const panelElement = ref.current;\n      if (!panelElement) return null;\n      if (!scrollElement) return panelElement;\n      if (typeof scrollElement === \"function\") {\n        return scrollElement(panelElement);\n      }\n      if (\"current\" in scrollElement) {\n        return scrollElement.current;\n      }\n      return scrollElement;\n    });\n\n    // Adds scroll restoration behavior to the tab panel.\n    useEffect(() => {\n      if (!scrollRestoration) return;\n      if (!mounted) return;\n      const element = getScrollElement();\n      if (!element) return;\n      // If scrollRestoration is set to \"reset\", scroll to the top of the\n      // element and return early.\n      if (scrollRestoration === \"reset\") {\n        element.scroll(0, 0);\n        return;\n      }\n      if (!tabId) return;\n      const position = scrollPositionRef.current.get(tabId);\n      element.scroll(position?.x ?? 0, position?.y ?? 0);\n      // On scroll, save the scroll position for the current tab id.\n      const onScroll = () => {\n        scrollPositionRef.current.set(tabId, {\n          x: element.scrollLeft,\n          y: element.scrollTop,\n        });\n      };\n      element.addEventListener(\"scroll\", onScroll);\n      return () => {\n        element.removeEventListener(\"scroll\", onScroll);\n      };\n    }, [scrollRestoration, mounted, tabId, getScrollElement]);\n\n    const [hasTabbableChildren, setHasTabbableChildren] = useState(false);\n\n    // Re-check tabbable children each time the panel becomes visible so\n    // content rendered conditionally on tab selection is accounted for.\n    useSafeLayoutEffect(() => {\n      if (!mounted) return;\n      const element = ref.current;\n      if (!element) return;\n      setHasTabbableChildren(!!getAllTabbableIn(element).length);\n    }, [mounted]);\n\n    const getItem = useCallback<NonNullable<CollectionItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, id: id || item.id, tabId: tabIdProp };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [id, tabIdProp, getItemProp],\n    );\n\n    const onKeyDownProp = props.onKeyDown;\n\n    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!store?.composite) return;\n      const keyMap = {\n        ArrowLeft: store.previous,\n        ArrowRight: store.next,\n        Home: store.first,\n        End: store.last,\n      };\n      const action = keyMap[event.key as keyof typeof keyMap];\n      if (!action) return;\n      const { selectedId } = store.getState();\n      const nextId = action({ activeId: selectedId });\n      if (!nextId) return;\n      event.preventDefault();\n      store.move(nextId);\n    });\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <TabScopedContextProvider value={store}>\n          {element}\n        </TabScopedContextProvider>\n      ),\n      [store],\n    );\n\n    props = {\n      role: \"tabpanel\",\n      \"aria-labelledby\":\n        props[\"aria-label\"] != null ? undefined : tabId || undefined,\n      ...props,\n      id,\n      children: unmountOnHide && !mounted ? null : props.children,\n      ref: useMergeRefs(ref, props.ref),\n      onKeyDown,\n    };\n\n    props = useFocusable({\n      // If the tab panel is rendered as part of another composite widget such\n      // as combobox, it should not be focusable.\n      focusable: !store.composite && !hasTabbableChildren,\n      ...props,\n    });\n    props = useDisclosureContent({ store: disclosure, ...props });\n    props = useCollectionItem({ store: store.panels, ...props, getItem });\n\n    return props;\n  },\n);\n\n/**\n * Renders a tab panel element that's controlled by a\n * [`Tab`](https://ariakit.com/reference/tab) component.\n *\n * If the [`tabId`](https://ariakit.com/reference/tab-panel#tabid) prop isn't\n * provided, the tab panel will automatically associate with a\n * [`Tab`](https://ariakit.com/reference/tab) based on its position in the DOM.\n * Alternatively, you can render a single tab panel with a dynamic\n * [`tabId`](https://ariakit.com/reference/tab-panel#tabid) value pointing to\n * the selected tab.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx {6,7}\n * <TabProvider>\n *   <TabList>\n *     <Tab>Tab 1</Tab>\n *     <Tab>Tab 2</Tab>\n *   </TabList>\n *   <TabPanel>Panel 1</TabPanel>\n *   <TabPanel>Panel 2</TabPanel>\n * </TabProvider>\n * ```\n */\nexport const TabPanel = forwardRef(function TabPanel(props: TabPanelProps) {\n  const htmlProps = useTabPanel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TabPanelOptions<T extends ElementType = TagName>\n  extends\n    FocusableOptions<T>,\n    CollectionItemOptions<T>,\n    Omit<DisclosureContentOptions<T>, \"store\"> {\n  /**\n   * Object returned by the\n   * [`useTabStore`](https://ariakit.com/reference/use-tab-store) hook. If not\n   * provided, the closest\n   * [`TabProvider`](https://ariakit.com/reference/tab-provider) component's\n   * context will be used.\n   */\n  store?: TabStore;\n  /**\n   * The [`id`](https://ariakit.com/reference/tab#id) of the tab controlling\n   * this panel. This connection is used to assign the `aria-labelledby`\n   * attribute to the tab panel and to determine if the tab panel should be\n   * visible.\n   *\n   * This link is automatically established by matching the order of\n   * [`Tab`](https://ariakit.com/reference/tab) and\n   * [`TabPanel`](https://ariakit.com/reference/tab-panel) elements in the DOM.\n   * If you're rendering a single tab panel, this can be set to a dynamic value\n   * that refers to the selected tab.\n   *\n   * Live examples:\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * - [Tab with React Router](https://ariakit.com/examples/tab-react-router)\n   * - [Animated TabPanel](https://ariakit.com/examples/tab-panel-animated)\n   * - [Select with Combobox and\n   *   Tabs](https://ariakit.com/examples/select-combobox-tab)\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   */\n  tabId?: string | null;\n  /**\n   * Manages the scrolling behavior of the tab panel when it is hidden and then\n   * shown again.\n   *\n   * This is especially useful when using a single tab panel for multiple tabs,\n   * where you dynamically change the\n   * [`tabId`](https://ariakit.com/reference/tab-panel#tabid) prop and the\n   * panel's children, which would otherwise retain the current scroll position\n   * when switching tabs.\n   *\n   * When set to `true`, the component will save the scroll position and restore\n   * it when the panel is shown again. When set to `\"reset\"`, the scroll\n   * position will reset to the top when the panel is displayed again.\n   *\n   * The default scroll element is the tab panel itself. To scroll a different\n   * element, use the\n   * [`scrollElement`](https://ariakit.com/reference/tab-panel#scrollelement)\n   * prop.\n   * @default false\n   */\n  scrollRestoration?: boolean | \"reset\";\n  /**\n   * When using the\n   * [`scrollRestoration`](https://ariakit.com/reference/tab-panel#scrollrestoration)\n   * prop, the tab panel element serves as the default scroll element. You can\n   * use this prop to designate a different element for scrolling.\n   *\n   * If a function is provided, it will be called with the tab panel element as\n   * an argument. The function should return the element to scroll.\n   * @example\n   * ```jsx\n   * <TabPanel\n   *   scrollRestoration\n   *   scrollElement={(panel) => panel.querySelector(\".scrollable\")}\n   * />\n   * ```\n   */\n  scrollElement?:\n    | HTMLElement\n    | RefObject<HTMLElement | null>\n    | ((panel: HTMLElement) => HTMLElement | null);\n}\n\nexport type TabPanelProps<T extends ElementType = TagName> = Props<\n  T,\n  TabPanelOptions<T>\n>;\n"],"mappings":"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"}

package/dist/tab/tab.d.ts

@@ -1,4 +1,4 @@
-import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { n as CompositeItemOptions } from "../composite-item-d4UXaZ84.js";
 import { TabStore } from "./tab-store.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
@@ -36,7 +36,7 @@ declare const useTab: import("@ariakit/react-utils").Hook<"button", TabOptions<"
  * </TabProvider>
  * ```
  */
-declare const Tab: (props: TabProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const Tab: (props: TabProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface TabOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
   /**
    * Object returned by the

package/dist/tab/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","names":["Props","ElementType","CompositeItemOptions","TabStore","TagName","useTab","TabOptions","Hook","Tab","TabProps","props","ReactElement","JSXElementConstructor","T","store","accessibleWhenDisabled"],"sources":["../../src/tab/tab.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AACQ;AAc7B;;;AAhB+C,cAgB1BC,MAAAA,iCAAuCE,IAAAA,WAAeD,UAAU;AAAA;AAiBrF;;;;;;;;;AAA+H;AAC/H;;;;;AAlBqF,cAiBhEE,GAAAA,GAAME,KAAAA,EAAOD,QAAQ,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzFN,UAAAA,WAAqBL,WAAAA,GAAcG,OAAAA,UAAiBF,oBAAAA,CAAqBW,CAAAA;EAW7DX;;;;;;EAJzBY,KAAAA,GAAQX,QAAAA;EAPyDD;;;EAWjEa,sBAAAA,GAAyBb,oBAAAA;AAAAA;AAAAA,KAEjBO,QAAAA,WAAmBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,UAAAA,CAAWO,CAAAA"}
+{"version":3,"file":"tab.d.ts","names":["Props","ElementType","CompositeItemOptions","TabStore","TagName","useTab","TabOptions","Hook","Tab","TabProps","props","ReactElement","JSXElementConstructor","T","store","accessibleWhenDisabled"],"sources":["../../src/tab/tab.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AACQ;AAc7B;;;AAhB+C,cAgB1BC,MAAAA,iCAAuCE,IAAAA,WAAeD,UAAU;AAAA;AAiBrF;;;;;;;;;AAAmI;AACnI;;;;;AAlBqF,cAiBhEE,GAAAA,GAAME,KAAAA,EAAOD,QAAQ,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC7FN,UAAAA,WAAqBL,WAAAA,GAAcG,OAAAA,UAAiBF,oBAAAA,CAAqBW,CAAAA;EAW7DX;;;;;;EAJzBY,KAAAA,GAAQX,QAAAA;EAPyDD;;;EAWjEa,sBAAAA,GAAyBb,oBAAAA;AAAAA;AAAAA,KAEjBO,QAAAA,WAAmBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,UAAAA,CAAWO,CAAAA"}

package/dist/tab/tab.js

@@ -24,7 +24,7 @@ const TagName = "button";
 const useTab = createHook(function useTab({ store, getItem: getItemProp, ...props }) {
 	const context = useTabScopedContext();
 	store = store || context;
-	invariant(store, "Tab must be wrapped in a TabList component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component.");
 	const defaultId = useId();
 	const id = props.id || defaultId;
 	const dimmed = disabledFromProps(props);

package/dist/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","names":[],"sources":["../../src/tab/tab.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useId,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { disabledFromProps, invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useCallback } from \"react\";\nimport type { CompositeItemOptions } from \"../composite/composite-item.tsx\";\nimport {\n  CompositeItem,\n  useCompositeItem,\n} from \"../composite/composite-item.tsx\";\nimport { useTabScopedContext } from \"./tab-context.tsx\";\nimport type { TabStore } from \"./tab-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `Tab` component.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx\n * const store = useTabStore();\n * const props = useTab({ store });\n * <TabList store={store}>\n *   <Role {...props}>Tab 1</Role>\n * </TabList>\n * <TabPanel store={store}>Panel 1</TabPanel>\n * ```\n */\nexport const useTab = createHook<TagName, TabOptions>(function useTab({\n  store,\n  getItem: getItemProp,\n  ...props\n}) {\n  const context = useTabScopedContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"Tab must be wrapped in a TabList component.\",\n  );\n\n  // Keep a reference to the default id so we can wait before all tabs have\n  // been assigned an id before registering them in the store. See\n  // https://github.com/ariakit/ariakit/issues/1721\n  const defaultId = useId();\n  const id = props.id || defaultId;\n  const dimmed = disabledFromProps(props);\n\n  const getItem = useCallback<NonNullable<CompositeItemOptions[\"getItem\"]>>(\n    (item) => {\n      const nextItem = { ...item, dimmed };\n      if (getItemProp) {\n        return getItemProp(nextItem);\n      }\n      return nextItem;\n    },\n    [dimmed, getItemProp],\n  );\n\n  const onClickProp = props.onClick;\n\n  const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n    onClickProp?.(event);\n    if (event.defaultPrevented) return;\n    store?.setSelectedId(id);\n  });\n\n  const panelId = useStoreState(\n    store.panels,\n    (state) => state.items.find((item) => item.tabId === id)?.id,\n  );\n  const shouldRegisterItem = defaultId ? props.shouldRegisterItem : false;\n\n  const isActive = useStoreState(\n    store,\n    (state) => !!id && state.activeId === id,\n  );\n  const selected = useStoreState(\n    store,\n    (state) => !!id && state.selectedId === id,\n  );\n  const hasActiveItem = useStoreState(\n    store,\n    (state) => !!store.item(state.activeId),\n  );\n  const canRegisterComposedItem = isActive || (selected && !hasActiveItem);\n  const accessibleWhenDisabled =\n    selected || (props.accessibleWhenDisabled ?? true);\n\n  // If the tab is rendered within another composite widget with virtual focus,\n  // such as combobox, it shouldn't be tabbable even if the tab store uses\n  // roving tabindex. Otherwise, the focus will be trapped within the composite\n  // widget.\n  const isWithinVirtualFocusComposite = useStoreState(\n    store.combobox || store.composite,\n    \"virtualFocus\",\n  );\n\n  if (isWithinVirtualFocusComposite) {\n    props = {\n      ...props,\n      tabIndex: -1,\n    };\n  }\n\n  props = {\n    role: \"tab\",\n    \"aria-selected\": selected,\n    \"aria-controls\": panelId || undefined,\n    ...props,\n    id,\n    onClick,\n  };\n\n  // If the tab is rendered as part of another composite widget such as\n  // combobox, we need to render it as a composite item. This ensures it's\n  // recognized in the composite store and lets us manage arrow key navigation\n  // to move focus to other composite items that might be rendered in a tab\n  // panel. We only register the selected tab to maintain a vertical list\n  // orientation.\n  if (store.composite) {\n    const defaultProps = {\n      id,\n      accessibleWhenDisabled,\n      store: store.composite,\n      shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem,\n      rowId: props.rowId,\n      render: props.render,\n    } satisfies CompositeItemOptions;\n    props = {\n      ...props,\n      render: (\n        <CompositeItem\n          {...defaultProps}\n          render={\n            store.combobox && store.composite !== store.combobox ? (\n              <CompositeItem {...defaultProps} store={store.combobox} />\n            ) : (\n              defaultProps.render\n            )\n          }\n        />\n      ),\n    };\n  }\n\n  props = useCompositeItem({\n    store,\n    ...props,\n    accessibleWhenDisabled,\n    getItem,\n    shouldRegisterItem,\n  });\n\n  return props;\n});\n\n/**\n * Renders a tab element inside a\n * [`TabList`](https://ariakit.com/reference/tab-list) wrapper.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx {3,4}\n * <TabProvider>\n *   <TabList>\n *     <Tab>Tab 1</Tab>\n *     <Tab>Tab 2</Tab>\n *   </TabList>\n *   <TabPanel>Panel 1</TabPanel>\n *   <TabPanel>Panel 2</TabPanel>\n * </TabProvider>\n * ```\n */\nexport const Tab = memo(\n  forwardRef(function Tab(props: TabProps) {\n    const htmlProps = useTab(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface TabOptions<\n  T extends ElementType = TagName,\n> extends CompositeItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTabStore`](https://ariakit.com/reference/use-tab-store) hook. If not\n   * provided, the closest [`TabList`](https://ariakit.com/reference/tab-list)\n   * component's context will be used.\n   */\n  store?: TabStore;\n  /**\n   * @default true\n   */\n  accessibleWhenDisabled?: CompositeItemOptions[\"accessibleWhenDisabled\"];\n}\n\nexport type TabProps<T extends ElementType = TagName> = Props<T, TabOptions<T>>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MA2CE,SAAM,WAAU,SAAA,OAAoB,EAAA,OAAA,SAAA,aAAA,GAAA,SAAA;CACpC,MAAA,UAAQ,oBAAS;CAEjB,QAAA,SAGI;CAMJ,UAAM,OAAA,6CAAkB;CACxB,MAAM,YAAW,MAAM;CACvB,MAAM,KAAA,MAAS,MAAA;CAEf,MAAM,SAAA,kBACH,KAAS;OACR,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAO;EACnC;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACC;CAGH,GAAA,CAAA,QAAM,WAAc,CAAA;CAEpB,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAO,kBAAgB;EACxB,OAAA,cAAA,EAAA;CAED,CAAA;CAIA,MAAM,UAAA,cAAqB,MAAA,SAAkB,UAAA,MAAA,MAAqB,MAAA,SAAA,KAAA,UAAA,EAAA,GAAA,EAAA;CAElE,MAAM,qBAAW,YAEd,MAAA,qBAAwB;CAE3B,MAAM,WAAW,cACf,QACC,UAAU,CAAC,CAAC,MAAM,MAAM,aAAA,EAAe;CAE1C,MAAM,WAAA,cAAgB,QACpB,UACC,CAAA,CAAA,MAAY,MAAM,eAAW,EAAA;CAEhC,MAAM,gBAAA,cAA0B,QAAa,UAAA,CAAA,CAAY,MAAC,KAAA,MAAA,QAAA,CAAA;CAC1D,MAAM,0BACJ,YAAa,YAAM,CAAA;CAWrB,MALsC,yBAC9B,aAAkB,MAAA,0BAKxB;KACK,cAAA,MAAA,YAAA,MAAA,WAAA,cAAA,GAAA,QAAA;EACH,GAAA;EACF,UAAA;CAGF;SACQ;EACN,MAAA;EACA,iBAAiB;EACjB,iBAAG,WAAA,KAAA;EACH,GAAA;EACA;EACF;CAQA;KACE,MAAM,WAAA;QACJ,eAAA;GACA;GACA;GACA,OAAA,MAAA;GACA,oBAAa,2BAAA;GACb,OAAA,MAAQ;GACV,QAAA,MAAA;EACA;UACK;GACH,GAAA;WAEQ,oBAAA,eAAA;IACJ,GAAA;YAEuB,MAAA,YAAA,MAAA,cAAA,MAAA,WAAA,oBAAA,eAAA;KAAc,GAAA;KAAwB,OAEzD,MAAA;IAGL,CAAA,IAAA,aAAA;GAEL,CAAA;EACF;CAEA;SACE,iBAAA;EACA;EACA,GAAA;EACA;EACA;EACD;CAED,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;MAqBG,MAAO,KAAA,WAAc,SADH,IAAO,OACc;CACxC,OACH,cAAA,SAAA,OAAA,KAAA,CAAA"}
+{"version":3,"file":"tab.js","names":[],"sources":["../../src/tab/tab.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useId,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { disabledFromProps, invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { useCallback } from \"react\";\nimport type { CompositeItemOptions } from \"../composite/composite-item.tsx\";\nimport {\n  CompositeItem,\n  useCompositeItem,\n} from \"../composite/composite-item.tsx\";\nimport { useTabScopedContext } from \"./tab-context.tsx\";\nimport type { TabStore } from \"./tab-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `Tab` component.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx\n * const store = useTabStore();\n * const props = useTab({ store });\n * <TabList store={store}>\n *   <Role {...props}>Tab 1</Role>\n * </TabList>\n * <TabPanel store={store}>Panel 1</TabPanel>\n * ```\n */\nexport const useTab = createHook<TagName, TabOptions>(function useTab({\n  store,\n  getItem: getItemProp,\n  ...props\n}) {\n  const context = useTabScopedContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"Tab must be wrapped in a TabList component.\",\n  );\n\n  // Keep a reference to the default id so we can wait before all tabs have\n  // been assigned an id before registering them in the store. See\n  // https://github.com/ariakit/ariakit/issues/1721\n  const defaultId = useId();\n  const id = props.id || defaultId;\n  const dimmed = disabledFromProps(props);\n\n  const getItem = useCallback<NonNullable<CompositeItemOptions[\"getItem\"]>>(\n    (item) => {\n      const nextItem = { ...item, dimmed };\n      if (getItemProp) {\n        return getItemProp(nextItem);\n      }\n      return nextItem;\n    },\n    [dimmed, getItemProp],\n  );\n\n  const onClickProp = props.onClick;\n\n  const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n    onClickProp?.(event);\n    if (event.defaultPrevented) return;\n    store?.setSelectedId(id);\n  });\n\n  const panelId = useStoreState(\n    store.panels,\n    (state) => state.items.find((item) => item.tabId === id)?.id,\n  );\n  const shouldRegisterItem = defaultId ? props.shouldRegisterItem : false;\n\n  const isActive = useStoreState(\n    store,\n    (state) => !!id && state.activeId === id,\n  );\n  const selected = useStoreState(\n    store,\n    (state) => !!id && state.selectedId === id,\n  );\n  const hasActiveItem = useStoreState(\n    store,\n    (state) => !!store.item(state.activeId),\n  );\n  const canRegisterComposedItem = isActive || (selected && !hasActiveItem);\n  const accessibleWhenDisabled =\n    selected || (props.accessibleWhenDisabled ?? true);\n\n  // If the tab is rendered within another composite widget with virtual focus,\n  // such as combobox, it shouldn't be tabbable even if the tab store uses\n  // roving tabindex. Otherwise, the focus will be trapped within the composite\n  // widget.\n  const isWithinVirtualFocusComposite = useStoreState(\n    store.combobox || store.composite,\n    \"virtualFocus\",\n  );\n\n  if (isWithinVirtualFocusComposite) {\n    props = {\n      ...props,\n      tabIndex: -1,\n    };\n  }\n\n  props = {\n    role: \"tab\",\n    \"aria-selected\": selected,\n    \"aria-controls\": panelId || undefined,\n    ...props,\n    id,\n    onClick,\n  };\n\n  // If the tab is rendered as part of another composite widget such as\n  // combobox, we need to render it as a composite item. This ensures it's\n  // recognized in the composite store and lets us manage arrow key navigation\n  // to move focus to other composite items that might be rendered in a tab\n  // panel. We only register the selected tab to maintain a vertical list\n  // orientation.\n  if (store.composite) {\n    const defaultProps = {\n      id,\n      accessibleWhenDisabled,\n      store: store.composite,\n      shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem,\n      rowId: props.rowId,\n      render: props.render,\n    } satisfies CompositeItemOptions;\n    props = {\n      ...props,\n      render: (\n        <CompositeItem\n          {...defaultProps}\n          render={\n            store.combobox && store.composite !== store.combobox ? (\n              <CompositeItem {...defaultProps} store={store.combobox} />\n            ) : (\n              defaultProps.render\n            )\n          }\n        />\n      ),\n    };\n  }\n\n  props = useCompositeItem({\n    store,\n    ...props,\n    accessibleWhenDisabled,\n    getItem,\n    shouldRegisterItem,\n  });\n\n  return props;\n});\n\n/**\n * Renders a tab element inside a\n * [`TabList`](https://ariakit.com/reference/tab-list) wrapper.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx {3,4}\n * <TabProvider>\n *   <TabList>\n *     <Tab>Tab 1</Tab>\n *     <Tab>Tab 2</Tab>\n *   </TabList>\n *   <TabPanel>Panel 1</TabPanel>\n *   <TabPanel>Panel 2</TabPanel>\n * </TabProvider>\n * ```\n */\nexport const Tab = memo(\n  forwardRef(function Tab(props: TabProps) {\n    const htmlProps = useTab(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface TabOptions<\n  T extends ElementType = TagName,\n> extends CompositeItemOptions<T> {\n  /**\n   * Object returned by the\n   * [`useTabStore`](https://ariakit.com/reference/use-tab-store) hook. If not\n   * provided, the closest [`TabList`](https://ariakit.com/reference/tab-list)\n   * component's context will be used.\n   */\n  store?: TabStore;\n  /**\n   * @default true\n   */\n  accessibleWhenDisabled?: CompositeItemOptions[\"accessibleWhenDisabled\"];\n}\n\nexport type TabProps<T extends ElementType = TagName> = Props<T, TabOptions<T>>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MA2CE,SAAM,WAAU,SAAA,OAAoB,EAAA,OAAA,SAAA,aAAA,GAAA,SAAA;CACpC,MAAA,UAAQ,oBAAS;CAEjB,QAAA,SAEE;CAOF,UAAM,OAAA,QAAkB,IAAA,aAAA,gBAAA,6CAAA;CACxB,MAAM,YAAW,MAAM;CACvB,MAAM,KAAA,MAAS,MAAA;CAEf,MAAM,SAAA,kBACH,KAAS;OACR,UAAM,aAAW,SAAA;QAAK,WAAA;GAAM,GAAA;GAAO;EACnC;EAGA,IAAA,aAAO,OAAA,YAAA,QAAA;EACT,OACC;CAGH,GAAA,CAAA,QAAM,WAAc,CAAA;CAEpB,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAO,kBAAgB;EACxB,OAAA,cAAA,EAAA;CAED,CAAA;CAIA,MAAM,UAAA,cAAqB,MAAA,SAAkB,UAAA,MAAA,MAAqB,MAAA,SAAA,KAAA,UAAA,EAAA,GAAA,EAAA;CAElE,MAAM,qBAAW,YAEd,MAAA,qBAAwB;CAE3B,MAAM,WAAW,cACf,QACC,UAAU,CAAC,CAAC,MAAM,MAAM,aAAA,EAAe;CAE1C,MAAM,WAAA,cAAgB,QACpB,UACC,CAAA,CAAA,MAAY,MAAM,eAAW,EAAA;CAEhC,MAAM,gBAAA,cAA0B,QAAa,UAAA,CAAA,CAAY,MAAC,KAAA,MAAA,QAAA,CAAA;CAC1D,MAAM,0BACJ,YAAa,YAAM,CAAA;CAWrB,MALsC,yBAC9B,aAAkB,MAAA,0BAKxB;KACK,cAAA,MAAA,YAAA,MAAA,WAAA,cAAA,GAAA,QAAA;EACH,GAAA;EACF,UAAA;CAGF;SACQ;EACN,MAAA;EACA,iBAAiB;EACjB,iBAAG,WAAA,KAAA;EACH,GAAA;EACA;EACF;CAQA;KACE,MAAM,WAAA;QACJ,eAAA;GACA;GACA;GACA,OAAA,MAAA;GACA,oBAAa,2BAAA;GACb,OAAA,MAAQ;GACV,QAAA,MAAA;EACA;UACK;GACH,GAAA;WAEQ,oBAAA,eAAA;IACJ,GAAA;YAEuB,MAAA,YAAA,MAAA,cAAA,MAAA,WAAA,oBAAA,eAAA;KAAc,GAAA;KAAwB,OAEzD,MAAA;IAGL,CAAA,IAAA,aAAA;GAEL,CAAA;EACF;CAEA;SACE,iBAAA;EACA;EACA,GAAA;EACA;EACA;EACD;CAED,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;MAqBG,MAAO,KAAA,WAAc,SADH,IAAO,OACc;CACxC,OACH,cAAA,SAAA,OAAA,KAAA,CAAA"}

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

@@ -1,5 +1,5 @@
 import { t as TagStore } from "../tag-store-xANOvuGo.js";
-import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { n as CompositeItemOptions } from "../composite-item-d4UXaZ84.js";
 import { Props } from "@ariakit/react-utils";
 import { ChangeEvent, ClipboardEvent, ElementType, KeyboardEvent, SyntheticEvent } from "react";
 import { BooleanOrCallback } from "@ariakit/utils";
@@ -52,7 +52,7 @@ declare const useTagInput: import("@ariakit/react-utils").Hook<"input", TagInput
  * </TagProvider>
  * ```
  */
-declare const TagInput: (props: TagInputProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TagInput: (props: TagInputProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface TagInputOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
   /**
    * Object returned by the

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

@@ -1 +1 @@
-{"version":3,"file":"tag-input.d.ts","names":["Props","BooleanOrCallback","ChangeEvent","ClipboardEvent","ElementType","KeyboardEvent","SyntheticEvent","CompositeItemOptions","TagStore","TagName","EventWithValues","T","values","useTagInput","TagInputOptions","Hook","TagInput","TagInputProps","props","ReactElement","JSXElementConstructor","RegExp","HTMLElement","store","delimiter","addValueOnPaste","addValueOnChange","setValueOnChange","removeOnBackspace","tabbable"],"sources":["../../src/tag/tag-input.d.ts"],"mappings":";;;;;;;cAKcS,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,KACxBC,eAAAA,WAA0BJ,cAAAA,IAAkBK,CAAC;EAC9CC,MAAAA;AAAAA;;AAHiB;AAAA;;;;AACQ;AAAA;;cAaRC,WAAAA,iCAA4CE,IAAAA,UAAcD,eAAe;;;;;;;AAXpF;AAWV;;;;AAA8F;AAiC9F;;;;;;;;;AAAyI;AACzI;;;;;;;;;;cADqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnGN,eAAAA,WAA0BV,WAAAA,GAAcK,OAAAA,UAAiBF,oBAAAA,CAAqBI,CAAAA;EAkCzEV;;;;;;;EA1BlBsB,KAAAA,GAAQf,QAAAA;EAqD4Cc;;;;;;;;;;;;;;EAtCpDE,SAAAA,YAAqBH,MAAAA,oBAA0BA,MAAAA;EAA/CG;;;;;;;;;;EAWAC,eAAAA,GAAkBxB,iBAAAA,CAAkBS,eAAAA,CAAgBP,cAAAA,CAAemB,WAAAA;EAUdpB;;;;;;;;;EAArDwB,gBAAAA,GAAmBzB,iBAAAA,CAAkBS,eAAAA,CAAgBR,WAAAA,CAAYoB,WAAAA;EAqBjEO;;;;AAAiC;AAErC;;;;EAbIF,gBAAAA,GAAmB1B,iBAAAA,CAAkBC,WAAAA,CAAYoB,WAAAA;EAacX;;;;;;EAN/DiB,iBAAAA,GAAoB3B,iBAAAA,CAAkBI,aAAAA,CAAciB,WAAAA;EAMpBlB;;;EAFhCyB,QAAAA,GAAWtB,oBAAAA,CAAqBI,CAAAA;AAAAA;AAAAA,KAExBM,aAAAA,WAAwBb,WAAAA,GAAcK,OAAAA,IAAWT,KAAAA,CAAMW,CAAAA,EAAGG,eAAAA,CAAgBH,CAAAA"}
+{"version":3,"file":"tag-input.d.ts","names":["Props","BooleanOrCallback","ChangeEvent","ClipboardEvent","ElementType","KeyboardEvent","SyntheticEvent","CompositeItemOptions","TagStore","TagName","EventWithValues","T","values","useTagInput","TagInputOptions","Hook","TagInput","TagInputProps","props","ReactElement","JSXElementConstructor","RegExp","HTMLElement","store","delimiter","addValueOnPaste","addValueOnChange","setValueOnChange","removeOnBackspace","tabbable"],"sources":["../../src/tag/tag-input.d.ts"],"mappings":";;;;;;;cAKcS,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAAA,KACxBC,eAAAA,WAA0BJ,cAAAA,IAAkBK,CAAC;EAC9CC,MAAAA;AAAAA;;AAHiB;AAAA;;;;AACQ;AAAA;;cAaRC,WAAAA,iCAA4CE,IAAAA,UAAcD,eAAe;;;;;;;AAXpF;AAWV;;;;AAA8F;AAiC9F;;;;;;;;;AAA6I;AAC7I;;;;;;;;;;cADqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACvGN,eAAAA,WAA0BV,WAAAA,GAAcK,OAAAA,UAAiBF,oBAAAA,CAAqBI,CAAAA;EAkCzEV;;;;;;;EA1BlBsB,KAAAA,GAAQf,QAAAA;EAqD4Cc;;;;;;;;;;;;;;EAtCpDE,SAAAA,YAAqBH,MAAAA,oBAA0BA,MAAAA;EAA/CG;;;;;;;;;;EAWAC,eAAAA,GAAkBxB,iBAAAA,CAAkBS,eAAAA,CAAgBP,cAAAA,CAAemB,WAAAA;EAUdpB;;;;;;;;;EAArDwB,gBAAAA,GAAmBzB,iBAAAA,CAAkBS,eAAAA,CAAgBR,WAAAA,CAAYoB,WAAAA;EAqBjEO;;;;AAAiC;AAErC;;;;EAbIF,gBAAAA,GAAmB1B,iBAAAA,CAAkBC,WAAAA,CAAYoB,WAAAA;EAacX;;;;;;EAN/DiB,iBAAAA,GAAoB3B,iBAAAA,CAAkBI,aAAAA,CAAciB,WAAAA;EAMpBlB;;;EAFhCyB,QAAAA,GAAWtB,oBAAAA,CAAqBI,CAAAA;AAAAA;AAAAA,KAExBM,aAAAA,WAAwBb,WAAAA,GAAcK,OAAAA,IAAWT,KAAAA,CAAMW,CAAAA,EAAGG,eAAAA,CAAgBH,CAAAA"}

package/dist/tag/tag-input.js

@@ -41,7 +41,7 @@ function splitValueByDelimiter(value, delimiters) {
 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.");
+	invariant(store, process.env.NODE_ENV !== "production" && "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);
@@ -62,7 +62,6 @@ const useTagInput = createHook(function useTagInput({ store, tabbable = true, de
 	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;

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

@@ -1 +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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"}
+{"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      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

@@ -1,5 +1,5 @@
 import { t as TagStore } from "../tag-store-xANOvuGo.js";
-import { n as CompositeOptions } from "../composite-DLvyFHMq.js";
+import { n as CompositeOptions } from "../composite-KBhCGLEy.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
 
@@ -42,7 +42,7 @@ declare const useTagListLabel: import("@ariakit/react-utils").Hook<"label", TagL
  * </TagProvider>
  * ```
  */
-declare const TagListLabel: (props: TagListLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TagListLabel: (props: TagListLabelProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface TagListLabelOptions<T extends ElementType = TagName> extends CompositeOptions<T> {
   /**
    * Object returned by the

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

@@ -1 +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"}
+{"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;;;;;;;;;AAAqJ;AACrJ;;;;;;;;;;;AA5BA,cA2BqBE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC/GN,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

@@ -17,7 +17,7 @@ const TagName = "label";
 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.");
+	invariant(store, process.env.NODE_ENV !== "production" && "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),

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

@@ -1 +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"}
+{"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,SAEE;CAIF,UAAM,OAAW,QAAQ,IAAA,aAAA,gBAAA,oFAAA;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

@@ -1,5 +1,5 @@
 import { t as TagStore } from "../tag-store-xANOvuGo.js";
-import { n as CompositeOptions } from "../composite-DLvyFHMq.js";
+import { n as CompositeOptions } from "../composite-KBhCGLEy.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
 
@@ -45,7 +45,7 @@ declare const useTagList: import("@ariakit/react-utils").Hook<"div", TagListOpti
  * </TagProvider>
  * ```
  */
-declare const TagList: (props: TagListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TagList: (props: TagListProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface TagListOptions<T extends ElementType = TagName> extends CompositeOptions<T> {
   /**
    * Object returned by the

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

@@ -1 +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"}
+{"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;;;;;;;;;AAA2I;AAC3I;;;;;;;;;;;;;;AA/BA,cA8BqBE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACrGN,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

@@ -20,7 +20,7 @@ const TagName = "div";
 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.");
+	invariant(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 = useEvent((event) => {
 		onMouseDownProp?.(event);

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

@@ -1 +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"}
+{"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,SAEE;CAIF,UAAM,OAAA,QAAkB,IAAA,aAAM,gBAAA,+EAAA;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-remove.d.ts

@@ -42,7 +42,7 @@ declare const useTagRemove: import("@ariakit/react-utils").Hook<"button", TagRem
  * </TagProvider>
  * ```
  */
-declare const TagRemove: (props: TagRemoveProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const TagRemove: (props: TagRemoveProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface TagRemoveOptions<_T extends ElementType = TagName> extends Options {
   /**
    * Object returned by the

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

@@ -1 +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"}
+{"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;;;;;;;;;AAA+I;AAC/I;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACzGN,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

@@ -20,7 +20,7 @@ const TagName = "button";
 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.");
+	invariant(store, process.env.NODE_ENV !== "production" && "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);
@@ -35,7 +35,6 @@ const useTagRemove = createHook(function useTagRemove({ store, value: valueProp,
 	const onClick = useEvent((event) => {
 		onClickProp?.(event);
 		if (event.defaultPrevented) return;
-		if (!store) return;
 		if (!value) return;
 		if (!removeOnClickProp(event)) return;
 		const { inputElement } = store.getState();

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

@@ -1 +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"}
+{"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 (!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,SAEE;CAIF,UAAM,OAAW,QAAQ,IAAA,aAAA,gBAAA,iFAAA;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,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-value.js

@@ -29,7 +29,7 @@ import { useStoreState } from "@ariakit/react-store";
 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.");
+	invariant(store, process.env.NODE_ENV !== "production" && "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;

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

@@ -1 +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"}
+{"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,SAEE;CAIF,UAAM,OAAQ,QAAA,IAAc,aAAc,gBAAA,gFAAA;CAE1C,MAAI,QACF,cAAO,OAAc,OAAA;CAGvB,IAAA,UAAO,OAAA,SAAA,KAAA;CACT,OAAA"}

package/dist/tag/tag-values.js

@@ -39,7 +39,7 @@ import { useStoreState } from "@ariakit/react-store";
 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.");
+	invariant(store, process.env.NODE_ENV !== "production" && "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;

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

@@ -1 +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"}
+{"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,SAEE;CAIF,UAAM,OAAS,QAAA,IAAc,aAAO,gBAAQ,iFAAA;CAE5C,MAAI,SACF,cAAO,OAAe,QAAA;CAGxB,IAAA,UAAO,OAAA,SAAA,MAAA;CACT,OAAA"}

package/dist/tag/tag.d.ts

@@ -1,5 +1,5 @@
 import { t as TagStore } from "../tag-store-xANOvuGo.js";
-import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { n as CompositeItemOptions } from "../composite-item-d4UXaZ84.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType, KeyboardEvent } from "react";
 import { BooleanOrCallback } from "@ariakit/utils";
@@ -50,7 +50,7 @@ declare const useTag: import("@ariakit/react-utils").Hook<"div", TagOptions<"div
  * </TagProvider>
  * ```
  */
-declare const Tag: (props: TagProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const Tag: (props: TagProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface TagOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
   /**
    * Object returned by the

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

@@ -1 +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"}
+{"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;;;;;;;;;AAAmI;AACnI;;;;;;;;;;;;;cADqBE,GAAAA,GAAME,KAAAA,EAAOD,QAAQ,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC7FN,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"}

package/dist/tag/tag.js

@@ -20,7 +20,7 @@ const TagName = "div";
 const useTag = createHook(function useTag({ store, value, getItem: getItemProp, removeOnKeyPress = true, ...props }) {
 	const context = useTagContext();
 	store = store || context;
-	invariant(store, "Tag must be wrapped in a TagList component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "Tag must be wrapped in a TagList component.");
 	const id = useId(props.id);
 	const touchDevice = useTouchDevice();
 	const getItem = useCallback((item) => {