@ariakit/react-components 0.1.0

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

@@ -0,0 +1,77 @@
+import { i as CompositeStoreOptions, n as CompositeStoreFunctions, o as CompositeStoreState, r as CompositeStoreItem, t as CompositeStore } from "../composite-store-DyJc-XRA.js";
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { Store } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/tab/tab-store";
+
+//#region src/tab/tab-store.d.ts
+declare function useTabStoreProps<T extends Core.TabStore>(store: T, update: () => void, props: TabStoreProps): T & {
+  panels: import("@ariakit/components/collection/collection-store").CollectionStore<Core.TabStorePanel> & {
+    useState: import("@ariakit/react-store").UseState<import("@ariakit/components/collection/collection-store").CollectionStoreState<Core.TabStorePanel>>;
+  };
+} & {
+  composite: CompositeStore<CompositeStoreItem> | null | undefined;
+  combobox: ComboboxStore<import("@ariakit/components/combobox/combobox-store").ComboboxStoreSelectedValue> | null | undefined;
+};
+/**
+ * Creates a tab store to control the state of
+ * [Tab](https://ariakit.com/components/tab) components.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx
+ * const tab = useTabStore();
+ *
+ * <TabList store={tab}>
+ *   <Tab>Tab 1</Tab>
+ *   <Tab>Tab 2</Tab>
+ * </TabList>
+ * <TabPanel store={tab}>Panel 1</TabPanel>
+ * <TabPanel store={tab}>Panel 2</TabPanel>
+ * ```
+ */
+declare function useTabStore(props?: TabStoreProps): TabStore;
+interface TabStoreItem extends Core.TabStoreItem {}
+interface TabStoreState extends Core.TabStoreState, CompositeStoreState<TabStoreItem> {}
+interface TabStoreFunctions extends Pick<TabStoreOptions, "composite" | "combobox">, Omit<Core.TabStoreFunctions, "panels" | "composite" | "combobox">, CompositeStoreFunctions<TabStoreItem> {
+  panels: Store<Core.TabStoreFunctions["panels"]>;
+}
+interface TabStoreOptions extends Omit<Core.TabStoreOptions, "composite" | "combobox">, CompositeStoreOptions<TabStoreItem> {
+  /**
+   * Function that will be called when the
+   * [`selectedId`](https://ariakit.com/reference/tab-provider#selectedid) state
+   * changes.
+   *
+   * Live examples:
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * - [Select with Combobox and
+   *   Tabs](https://ariakit.com/examples/select-combobox-tab)
+   * - [Command Menu with
+   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
+   */
+  setSelectedId?: (selectedId: TabStoreState["selectedId"]) => void;
+  /**
+   * A reference to another [composite
+   * store](https://ariakit.com/reference/use-composite-store). This is
+   * automatically set when rendering tabs as part of another composite widget,
+   * such as [Combobox](https://ariakit.com/components/combobox) or
+   * [Select](https://ariakit.com/components/select).
+   *
+   * Live examples:
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   */
+  composite?: CompositeStore | null;
+  /**
+   * A reference to a [combobox
+   * store](https://ariakit.com/reference/use-combobox-store). This is
+   * automatically set when rendering tabs inside a
+   * [Combobox](https://ariakit.com/components/combobox).
+   *
+   * Live examples:
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   */
+  combobox?: ComboboxStore | null;
+}
+interface TabStoreProps extends TabStoreOptions, Omit<Core.TabStoreProps, "composite" | "combobox"> {}
+interface TabStore extends TabStoreFunctions, Omit<Store<Core.TabStore>, "panels" | "composite" | "combobox"> {}
+//#endregion
+export { TabStore, TabStoreFunctions, TabStoreItem, TabStoreOptions, TabStoreProps, TabStoreState, useTabStore, useTabStoreProps };
+//# sourceMappingURL=tab-store.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-store.d.ts","names":["Core","Store","ComboboxStore","CompositeStore","CompositeStoreFunctions","CompositeStoreOptions","CompositeStoreState","useTabStoreProps","T","TabStore","TabStoreProps","TabStorePanel","_$___composite_composite_store_ts0","CompositeStoreItem","store","update","props","panels","CollectionStore","useState","UseState","CollectionStoreState","composite","combobox","ComboboxStoreSelectedValue","useTabStore","TabStoreItem","TabStoreState","TabStoreFunctions","TabStoreOptions","Pick","Omit","setSelectedId","selectedId"],"sources":["../../src/tab/tab-store.d.ts"],"mappings":";;;;;;iBAIwBO,gBAAAA,WAA2BP,IAAAA,CAAKS,QAAAA,CAAAA,CAAUK,KAAAA,EAAON,CAAAA,EAAGO,MAAAA,cAAoBC,KAAAA,EAAON,aAAAA,GAAgBF,CAAAA;EACnHS,MAAAA,4DAAkEC,eAAAA,CAAgBlB,IAAAA,CAAKW,aAAAA;IACnFQ,QAAAA,iCAAyCC,QAAAA,2DAAmEC,oBAAAA,CAAqBrB,IAAAA,CAAKW,aAAAA;EAAAA;AAAAA;EAG1IW,SAAAA,EAAWnB,cAAAA,CAH4IS,kBAAAA;EAIvJW,QAAAA,EAAUrB,aAAAA,uDAAoEsB,0BAAAA;AAAAA;;;;;;;;;;;;;;;;;iBAkB1DC,WAAAA,CAAYT,KAAAA,GAAQN,aAAAA,GAAgBD,QAAQ;AAAA,UACnDiB,YAAAA,SAAqB1B,IAAAA,CAAK0B,YAAY;AAAA,UAEtCC,aAAAA,SAAsB3B,IAAAA,CAAK2B,aAAAA,EAAerB,mBAAAA,CAAoBoB,YAAAA;AAAAA,UAE9DE,iBAAAA,SAA0BE,IAAAA,CAAKD,eAAAA,6BAA4CE,IAAAA,CAAK/B,IAAAA,CAAK4B,iBAAAA,wCAAyDxB,uBAAAA,CAAwBsB,YAAAA;EACnLT,MAAAA,EAAQhB,KAAAA,CAAMD,IAAAA,CAAK4B,iBAAAA;AAAAA;AAAAA,UAENC,eAAAA,SAAwBE,IAAAA,CAAK/B,IAAAA,CAAK6B,eAAAA,6BAA4CxB,qBAAAA,CAAsBqB,YAAAA;EA9ByBf;;;;;;;;AAIlC;AAkB5G;;;EAqBIqB,aAAAA,IAAiBC,UAAAA,EAAYN,aAAAA;EArBWjB;;;;AAAwB;AACpE;;;;AAAuD;EA+BnDY,SAAAA,GAAYnB,cAAAA;EA7Bc;;;;;;;;;EAuC1BoB,QAAAA,GAAWrB,aAAAA;AAAAA;AAAAA,UAEEQ,aAAAA,SAAsBmB,eAAAA,EAAiBE,IAAAA,CAAK/B,IAAAA,CAAKU,aAAAA;AAAAA,UAEjDD,QAAAA,SAAiBmB,iBAAAA,EAAmBG,IAAAA,CAAK9B,KAAAA,CAAMD,IAAAA,CAAKS,QAAAA"}

package/dist/tab/tab-store.js

@@ -0,0 +1,55 @@
+"use client";
+import { useComboboxContext } from "../combobox/combobox-context.js";
+import { useCompositeStoreProps } from "../composite/composite-store.js";
+import { useSelectContext } from "../select/select-context.js";
+import { useUpdateEffect } from "@ariakit/react-utils";
+import { useMemo } from "react";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/tab/tab-store";
+//#region src/tab/tab-store.ts
+function useTabStoreProps(store, update, props) {
+	useUpdateEffect(update, [props.composite, props.combobox]);
+	store = useCompositeStoreProps(store, update, props);
+	useStoreProps(store, props, "selectedId", "setSelectedId");
+	useStoreProps(store, props, "selectOnMove");
+	const [panels, updatePanels] = useStore(() => store.panels, {});
+	useUpdateEffect(updatePanels, [store, updatePanels]);
+	return Object.assign(useMemo(() => ({
+		...store,
+		panels
+	}), [store, panels]), {
+		composite: props.composite,
+		combobox: props.combobox
+	});
+}
+/**
+* Creates a tab store to control the state of
+* [Tab](https://ariakit.com/components/tab) components.
+* @see https://ariakit.com/components/tab
+* @example
+* ```jsx
+* const tab = useTabStore();
+*
+* <TabList store={tab}>
+*   <Tab>Tab 1</Tab>
+*   <Tab>Tab 2</Tab>
+* </TabList>
+* <TabPanel store={tab}>Panel 1</TabPanel>
+* <TabPanel store={tab}>Panel 2</TabPanel>
+* ```
+*/
+function useTabStore(props = {}) {
+	const combobox = useComboboxContext();
+	const composite = useSelectContext() || combobox;
+	props = {
+		...props,
+		composite: props.composite !== void 0 ? props.composite : composite,
+		combobox: props.combobox !== void 0 ? props.combobox : combobox
+	};
+	const [store, update] = useStore(Core.createTabStore, props);
+	return useTabStoreProps(store, update, props);
+}
+//#endregion
+export { useTabStore, useTabStoreProps };
+
+//# sourceMappingURL=tab-store.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-store.js","names":[],"sources":["../../src/tab/tab-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/tab/tab-store\";\nimport { useStore, useStoreProps } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport { useUpdateEffect } from \"@ariakit/react-utils\";\nimport { useMemo } from \"react\";\nimport { useComboboxContext } from \"../combobox/combobox-context.tsx\";\nimport type { ComboboxStore } from \"../combobox/combobox-store.ts\";\nimport type {\n  CompositeStore,\n  CompositeStoreFunctions,\n  CompositeStoreOptions,\n  CompositeStoreState,\n} from \"../composite/composite-store.ts\";\nimport { useCompositeStoreProps } from \"../composite/composite-store.ts\";\nimport { useSelectContext } from \"../select/select-context.tsx\";\n\nexport function useTabStoreProps<T extends Core.TabStore>(\n  store: T,\n  update: () => void,\n  props: TabStoreProps,\n) {\n  useUpdateEffect(update, [props.composite, props.combobox]);\n\n  store = useCompositeStoreProps(store, update, props);\n  useStoreProps(store, props, \"selectedId\", \"setSelectedId\");\n  useStoreProps(store, props, \"selectOnMove\");\n\n  const [panels, updatePanels] = useStore(() => store.panels, {});\n  useUpdateEffect(updatePanels, [store, updatePanels]);\n\n  return Object.assign(\n    useMemo(() => ({ ...store, panels }), [store, panels]),\n    { composite: props.composite, combobox: props.combobox },\n  );\n}\n\n/**\n * Creates a tab store to control the state of\n * [Tab](https://ariakit.com/components/tab) components.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx\n * const tab = useTabStore();\n *\n * <TabList store={tab}>\n *   <Tab>Tab 1</Tab>\n *   <Tab>Tab 2</Tab>\n * </TabList>\n * <TabPanel store={tab}>Panel 1</TabPanel>\n * <TabPanel store={tab}>Panel 2</TabPanel>\n * ```\n */\nexport function useTabStore(props: TabStoreProps = {}): TabStore {\n  const combobox = useComboboxContext();\n  const composite = useSelectContext() || combobox;\n  props = {\n    ...props,\n    composite: props.composite !== undefined ? props.composite : composite,\n    combobox: props.combobox !== undefined ? props.combobox : combobox,\n  };\n  const [store, update] = useStore(Core.createTabStore, props);\n  return useTabStoreProps(store, update, props);\n}\n\nexport interface TabStoreItem extends Core.TabStoreItem {}\n\nexport interface TabStoreState\n  extends Core.TabStoreState, CompositeStoreState<TabStoreItem> {}\n\nexport interface TabStoreFunctions\n  extends\n    Pick<TabStoreOptions, \"composite\" | \"combobox\">,\n    Omit<Core.TabStoreFunctions, \"panels\" | \"composite\" | \"combobox\">,\n    CompositeStoreFunctions<TabStoreItem> {\n  panels: Store<Core.TabStoreFunctions[\"panels\"]>;\n}\n\nexport interface TabStoreOptions\n  extends\n    Omit<Core.TabStoreOptions, \"composite\" | \"combobox\">,\n    CompositeStoreOptions<TabStoreItem> {\n  /**\n   * Function that will be called when the\n   * [`selectedId`](https://ariakit.com/reference/tab-provider#selectedid) state\n   * changes.\n   *\n   * Live examples:\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\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  setSelectedId?: (selectedId: TabStoreState[\"selectedId\"]) => void;\n  /**\n   * A reference to another [composite\n   * store](https://ariakit.com/reference/use-composite-store). This is\n   * automatically set when rendering tabs as part of another composite widget,\n   * such as [Combobox](https://ariakit.com/components/combobox) or\n   * [Select](https://ariakit.com/components/select).\n   *\n   * Live examples:\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   */\n  composite?: CompositeStore | null;\n  /**\n   * A reference to a [combobox\n   * store](https://ariakit.com/reference/use-combobox-store). This is\n   * automatically set when rendering tabs inside a\n   * [Combobox](https://ariakit.com/components/combobox).\n   *\n   * Live examples:\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   */\n  combobox?: ComboboxStore | null;\n}\n\nexport interface TabStoreProps\n  extends TabStoreOptions, Omit<Core.TabStoreProps, \"composite\" | \"combobox\"> {}\n\nexport interface TabStore\n  extends\n    TabStoreFunctions,\n    Omit<Store<Core.TabStore>, \"panels\" | \"composite\" | \"combobox\"> {}\n"],"mappings":";;;;;;;;;SAqBE,iBAAyB,OAAM,QAAA,OAAW;CAE1C,gBAAQ,QAAA,CAAA,MAAuB,WAAO,MAAQ,QAAK,CAAA;CACnD,QAAA,uBAA4B,OAAA,QAAc,KAAA;CAC1C,cAAc,OAAO,OAAO,cAAc,eAAA;CAE1C,cAAO,OAAQ,OAAA,cAAgB;CAC/B,MAAA,CAAA,QAAA,gBAA+B,eAAO,MAAa,QAAA,CAAA,CAAA;CAEnD,gBAAc,cACZ,CAAA,OAAe,YAAA,CAAA;QAAK,OAAA,OAAA,eAAA;EAAO,GAAA;EAAO;KAChC,CAAA,OAAW,MAAM,CAAA,GAAA;EAAW,WAAU,MAAM;EAChD,UAAA,MAAA;CACF,CAAA;;;;;;;;;;;;;;;;;;SAmBQ,YAAW,QAAA,CAAA,GAAA;CACjB,MAAM,WAAA,mBAA6B;CACnC,MAAA,YAAQ,iBAAA,KAAA;SACH;EACH,GAAA;EACA,WAAU,MAAM,cAAa,KAAA,IAAY,MAAM,YAAW;EAC5D,UAAA,MAAA,aAAA,KAAA,IAAA,MAAA,WAAA;CACA;CACA,MAAA,CAAO,OAAA,UAAiB,SAAO,KAAA,gBAAa,KAAA;CAC9C,OAAA,iBAAA,OAAA,QAAA,KAAA"}

package/dist/tab/tab.d.ts

@@ -0,0 +1,56 @@
+import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { TabStore } from "./tab-store.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/tab/tab.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Tab` component.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx
+ * const store = useTabStore();
+ * const props = useTab({ store });
+ * <TabList store={store}>
+ *   <Role {...props}>Tab 1</Role>
+ * </TabList>
+ * <TabPanel store={store}>Panel 1</TabPanel>
+ * ```
+ */
+declare const useTab: import("@ariakit/react-utils").Hook<"button", TabOptions<"button">>;
+/**
+ * Renders a tab element inside a
+ * [`TabList`](https://ariakit.com/reference/tab-list) wrapper.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx {3,4}
+ * <TabProvider>
+ *   <TabList>
+ *     <Tab>Tab 1</Tab>
+ *     <Tab>Tab 2</Tab>
+ *   </TabList>
+ *   <TabPanel>Panel 1</TabPanel>
+ *   <TabPanel>Panel 2</TabPanel>
+ * </TabProvider>
+ * ```
+ */
+declare const Tab: (props: TabProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface TabOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
+  /**
+   * Object returned by the
+   * [`useTabStore`](https://ariakit.com/reference/use-tab-store) hook. If not
+   * provided, the closest [`TabList`](https://ariakit.com/reference/tab-list)
+   * component's context will be used.
+   */
+  store?: TabStore;
+  /**
+   * @default true
+   */
+  accessibleWhenDisabled?: CompositeItemOptions["accessibleWhenDisabled"];
+}
+type TabProps<T extends ElementType = TagName> = Props<T, TabOptions<T>>;
+//#endregion
+export { Tab, TabOptions, TabProps, useTab };
+//# sourceMappingURL=tab.d.ts.map

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

@@ -0,0 +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"}

package/dist/tab/tab.js

@@ -0,0 +1,115 @@
+"use client";
+import { CompositeItem, useCompositeItem } from "../composite/composite-item.js";
+import { useTabScopedContext } from "./tab-context.js";
+import { createElement, createHook, forwardRef, memo, useEvent, useId } from "@ariakit/react-utils";
+import { disabledFromProps, invariant } from "@ariakit/utils";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/tab/tab.tsx
+const TagName = "button";
+/**
+* Returns props to create a `Tab` component.
+* @see https://ariakit.com/components/tab
+* @example
+* ```jsx
+* const store = useTabStore();
+* const props = useTab({ store });
+* <TabList store={store}>
+*   <Role {...props}>Tab 1</Role>
+* </TabList>
+* <TabPanel store={store}>Panel 1</TabPanel>
+* ```
+*/
+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.");
+	const defaultId = useId();
+	const id = props.id || defaultId;
+	const dimmed = disabledFromProps(props);
+	const getItem = useCallback((item) => {
+		const nextItem = {
+			...item,
+			dimmed
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [dimmed, getItemProp]);
+	const onClickProp = props.onClick;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		store?.setSelectedId(id);
+	});
+	const panelId = useStoreState(store.panels, (state) => state.items.find((item) => item.tabId === id)?.id);
+	const shouldRegisterItem = defaultId ? props.shouldRegisterItem : false;
+	const isActive = useStoreState(store, (state) => !!id && state.activeId === id);
+	const selected = useStoreState(store, (state) => !!id && state.selectedId === id);
+	const hasActiveItem = useStoreState(store, (state) => !!store.item(state.activeId));
+	const canRegisterComposedItem = isActive || selected && !hasActiveItem;
+	const accessibleWhenDisabled = selected || (props.accessibleWhenDisabled ?? true);
+	if (useStoreState(store.combobox || store.composite, "virtualFocus")) props = {
+		...props,
+		tabIndex: -1
+	};
+	props = {
+		role: "tab",
+		"aria-selected": selected,
+		"aria-controls": panelId || void 0,
+		...props,
+		id,
+		onClick
+	};
+	if (store.composite) {
+		const defaultProps = {
+			id,
+			accessibleWhenDisabled,
+			store: store.composite,
+			shouldRegisterItem: canRegisterComposedItem && shouldRegisterItem,
+			rowId: props.rowId,
+			render: props.render
+		};
+		props = {
+			...props,
+			render: /* @__PURE__ */ jsx(CompositeItem, {
+				...defaultProps,
+				render: store.combobox && store.composite !== store.combobox ? /* @__PURE__ */ jsx(CompositeItem, {
+					...defaultProps,
+					store: store.combobox
+				}) : defaultProps.render
+			})
+		};
+	}
+	props = useCompositeItem({
+		store,
+		...props,
+		accessibleWhenDisabled,
+		getItem,
+		shouldRegisterItem
+	});
+	return props;
+});
+/**
+* Renders a tab element inside a
+* [`TabList`](https://ariakit.com/reference/tab-list) wrapper.
+* @see https://ariakit.com/components/tab
+* @example
+* ```jsx {3,4}
+* <TabProvider>
+*   <TabList>
+*     <Tab>Tab 1</Tab>
+*     <Tab>Tab 2</Tab>
+*   </TabList>
+*   <TabPanel>Panel 1</TabPanel>
+*   <TabPanel>Panel 2</TabPanel>
+* </TabProvider>
+* ```
+*/
+const Tab = memo(forwardRef(function Tab(props) {
+	return createElement(TagName, useTab(props));
+}));
+//#endregion
+export { Tab, useTab };
+
+//# sourceMappingURL=tab.js.map

package/dist/tab/tab.js.map

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-context.d.ts","names":["TagStore","TagValueContext","Context","TagRemoveIdContext","id","useTagContext","useTagScopedContext","onlyScoped","useTagProviderContext","TagContextProvider","ProviderProps","props","JSX","Element","TagScopedContextProvider"],"sources":["../../src/tag/tag-context.d.ts"],"mappings":";;;cACqBC,eAAAA,kBAAiCC,OAAO;AAAA,cACxCC,kBAAAA,kBAAoCD,OAAAA,GAAUE,EAAW;AAD9E;;;;AAA6D;AAC7D;;;;AAA8E;AAc9E;;;AAfA,cAeqBC,aAAAA,QAAqBL,QAAQ;AAAA,cAC7BM,mBAAAA,GAAsBC,UAAAA,eAAyBP,QAAQ;AAAA,cACvDQ,qBAAAA,QAA6BR,QAAQ;AAAA,cACrCS,kBAAAA,GAAqBE,KAAAA,kBAAuBD,aAAAA,CAAcV,QAAQ,8CAA8CY,GAAAA,CAAIC,OAAAA;AAAAA,cACpHC,wBAAAA,GAA2BH,KAAAA,kBAAuBD,aAAAA,CAAcV,QAAQ,8CAA8CY,GAAAA,CAAIC,OAAAA"}

package/dist/tag/tag-context.js

@@ -0,0 +1,30 @@
+"use client";
+import { CompositeContextProvider, CompositeScopedContextProvider } from "../composite/composite-context.js";
+import { createStoreContext } from "@ariakit/react-utils";
+import { createContext } from "react";
+//#region src/tag/tag-context.tsx
+const TagValueContext = createContext(null);
+const TagRemoveIdContext = createContext(null);
+const ctx = createStoreContext([CompositeContextProvider], [CompositeScopedContextProvider]);
+/**
+* Returns the tag store from the nearest tag container.
+* @example
+* function Tag() {
+*   const store = useTagContext();
+*
+*   if (!store) {
+*     throw new Error("Tag must be wrapped in TagProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useTagContext = ctx.useContext;
+const useTagScopedContext = ctx.useScopedContext;
+const useTagProviderContext = ctx.useProviderContext;
+const TagContextProvider = ctx.ContextProvider;
+const TagScopedContextProvider = ctx.ScopedContextProvider;
+//#endregion
+export { TagContextProvider, TagRemoveIdContext, TagScopedContextProvider, TagValueContext, useTagContext, useTagProviderContext, useTagScopedContext };
+
+//# sourceMappingURL=tag-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-context.js","names":[],"sources":["../../src/tag/tag-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport { createContext } from \"react\";\nimport {\n  CompositeContextProvider,\n  CompositeScopedContextProvider,\n} from \"../composite/composite-context.tsx\";\nimport type { TagStore } from \"./tag-store.ts\";\n\nexport const TagValueContext = createContext<string | null>(null);\nexport const TagRemoveIdContext = createContext<((id?: string) => void) | null>(\n  null,\n);\n\nconst ctx = createStoreContext<TagStore>(\n  [CompositeContextProvider],\n  [CompositeScopedContextProvider],\n);\n\n/**\n * Returns the tag store from the nearest tag container.\n * @example\n * function Tag() {\n *   const store = useTagContext();\n *\n *   if (!store) {\n *     throw new Error(\"Tag must be wrapped in TagProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useTagContext = ctx.useContext;\n\nexport const useTagScopedContext = ctx.useScopedContext;\n\nexport const useTagProviderContext = ctx.useProviderContext;\n\nexport const TagContextProvider = ctx.ContextProvider;\n\nexport const TagScopedContextProvider = ctx.ScopedContextProvider;\n"],"mappings":";;;;;AASA,MAAa,kBAAA,cAAqB,IAChC;AAGF,MAAM,qBAAM,cACT,IAAA;;;;;;;;;;;;;;;AAmBH,MAAa,gBAAA,IAAA;AAEb,MAAa,sBAAA,IAAwB;AAErC,MAAa,wBAAqB,IAAI;AAEtC,MAAa,qBAAA,IAAA"}

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

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

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

@@ -0,0 +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"}