@ariakit/react-components 0.1.0

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

@@ -0,0 +1,24 @@
+import { TabStore } from "./tab-store.js";
+
+//#region src/tab/tab-context.d.ts
+/**
+ * Returns the tab store from the nearest tab container.
+ * @example
+ * function Tab() {
+ *   const store = useTabContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Tab must be wrapped in TabProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const useTabContext: () => TabStore | undefined;
+declare const useTabScopedContext: (onlyScoped?: boolean) => TabStore | undefined;
+declare const useTabProviderContext: () => TabStore | undefined;
+declare const TabContextProvider: (props: import("react").ProviderProps<TabStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const TabScopedContextProvider: (props: import("react").ProviderProps<TabStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { TabContextProvider, TabScopedContextProvider, useTabContext, useTabProviderContext, useTabScopedContext };
+//# sourceMappingURL=tab-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-context.d.ts","names":["TabStore","useTabContext","useTabScopedContext","onlyScoped","useTabProviderContext","TabContextProvider","ProviderProps","props","JSX","Element","TabScopedContextProvider"],"sources":["../../src/tab/tab-context.d.ts"],"mappings":";;;;;AAcA;;;;AAAkD;AAClD;;;;AAA4E;AAC5E;cAFqBC,aAAAA,QAAqBD,QAAQ;AAAA,cAC7BE,mBAAAA,GAAsBC,UAAAA,eAAyBH,QAAQ;AAAA,cACvDI,qBAAAA,QAA6BJ,QAAQ;AAAA,cACrCK,kBAAAA,GAAqBE,KAAAA,kBAAuBD,aAAAA,CAAcN,QAAQ,8CAA8CQ,GAAAA,CAAIC,OAAAA;AAAAA,cACpHC,wBAAAA,GAA2BH,KAAAA,kBAAuBD,aAAAA,CAAcN,QAAQ,8CAA8CQ,GAAAA,CAAIC,OAAAA"}

package/dist/tab/tab-context.js

@@ -0,0 +1,27 @@
+"use client";
+import { CompositeContextProvider, CompositeScopedContextProvider } from "../composite/composite-context.js";
+import { createStoreContext } from "@ariakit/react-utils";
+//#region src/tab/tab-context.tsx
+const ctx = createStoreContext([CompositeContextProvider], [CompositeScopedContextProvider]);
+/**
+* Returns the tab store from the nearest tab container.
+* @example
+* function Tab() {
+*   const store = useTabContext();
+*
+*   if (!store) {
+*     throw new Error("Tab must be wrapped in TabProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useTabContext = ctx.useContext;
+const useTabScopedContext = ctx.useScopedContext;
+const useTabProviderContext = ctx.useProviderContext;
+const TabContextProvider = ctx.ContextProvider;
+const TabScopedContextProvider = ctx.ScopedContextProvider;
+//#endregion
+export { TabContextProvider, TabScopedContextProvider, useTabContext, useTabProviderContext, useTabScopedContext };
+
+//# sourceMappingURL=tab-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-context.js","names":[],"sources":["../../src/tab/tab-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport {\n  CompositeContextProvider,\n  CompositeScopedContextProvider,\n} from \"../composite/composite-context.tsx\";\nimport type { TabStore } from \"./tab-store.ts\";\n\nconst ctx = createStoreContext<TabStore>(\n  [CompositeContextProvider],\n  [CompositeScopedContextProvider],\n);\n\n/**\n * Returns the tab store from the nearest tab container.\n * @example\n * function Tab() {\n *   const store = useTabContext();\n *\n *   if (!store) {\n *     throw new Error(\"Tab must be wrapped in TabProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useTabContext = ctx.useContext;\n\nexport const useTabScopedContext = ctx.useScopedContext;\n\nexport const useTabProviderContext = ctx.useProviderContext;\n\nexport const TabContextProvider = ctx.ContextProvider;\n\nexport const TabScopedContextProvider = ctx.ScopedContextProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,MAAa,gBAAA,IAAA;AAEb,MAAa,sBAAA,IAAwB;AAErC,MAAa,wBAAqB,IAAI;AAEtC,MAAa,qBAAA,IAAA"}

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

@@ -0,0 +1,55 @@
+import { n as CompositeOptions } from "../composite-DLvyFHMq.js";
+import { TabStore } from "./tab-store.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/tab/tab-list.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `TabList` component.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx
+ * const store = useTabStore();
+ * const props = useTabList({ store });
+ * <Role {...props}>
+ *   <Tab>Tab 1</Tab>
+ *   <Tab>Tab 2</Tab>
+ * </Role>
+ * <TabPanel store={store}>Panel 1</TabPanel>
+ * <TabPanel store={store}>Panel 2</TabPanel>
+ * ```
+ */
+declare const useTabList: import("@ariakit/react-utils").Hook<"div", TabListOptions<"div">>;
+/**
+ * Renders a composite tab list wrapper for
+ * [`Tab`](https://ariakit.com/reference/tab) elements.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx {2-5}
+ * <TabProvider>
+ *   <TabList>
+ *     <Tab>Tab 1</Tab>
+ *     <Tab>Tab 2</Tab>
+ *   </TabList>
+ *   <TabPanel>Panel 1</TabPanel>
+ *   <TabPanel>Panel 2</TabPanel>
+ * </TabProvider>
+ * ```
+ */
+declare const TabList: (props: TabListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface TabListOptions<T extends ElementType = TagName> extends CompositeOptions<T> {
+  /**
+   * Object returned by the
+   * [`useTabStore`](https://ariakit.com/reference/use-tab-store) hook. If not
+   * provided, the closest
+   * [`TabProvider`](https://ariakit.com/reference/tab-provider) component's
+   * context will be used.
+   */
+  store?: TabStore;
+}
+type TabListProps<T extends ElementType = TagName> = Props<T, TabListOptions<T>>;
+//#endregion
+export { TabList, TabListOptions, TabListProps, useTabList };
+//# sourceMappingURL=tab-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.d.ts","names":["Props","ElementType","CompositeOptions","TabStore","TagName","useTabList","TabListOptions","Hook","TabList","TabListProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/tab/tab-list.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AACQ;AAgB7B;;;;AAA0F;AAlB3C,cAkB1BC,UAAAA,iCAA2CE,IAAAA,QAAYD,cAAc;;;;;;;;;AAiB6C;AACvI;;;;;;;cADqBE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACjGN,cAAAA,WAAyBL,WAAAA,GAAcG,OAAAA,UAAiBF,gBAAAA,CAAiBW,CAAAA;EAAD;;;;;;;EAQrFC,KAAAA,GAAQX,QAAAA;AAAAA;AAAAA,KAEAM,YAAAA,WAAuBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,cAAAA,CAAeO,CAAAA"}

package/dist/tab/tab-list.js

@@ -0,0 +1,71 @@
+"use client";
+import { useComposite } from "../composite/composite.js";
+import { TabScopedContextProvider, useTabProviderContext } from "./tab-context.js";
+import { createElement, createHook, forwardRef, useWrapElement } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/tab/tab-list.tsx
+const TagName = "div";
+/**
+* Returns props to create a `TabList` component.
+* @see https://ariakit.com/components/tab
+* @example
+* ```jsx
+* const store = useTabStore();
+* const props = useTabList({ store });
+* <Role {...props}>
+*   <Tab>Tab 1</Tab>
+*   <Tab>Tab 2</Tab>
+* </Role>
+* <TabPanel store={store}>Panel 1</TabPanel>
+* <TabPanel store={store}>Panel 2</TabPanel>
+* ```
+*/
+const useTabList = createHook(function useTabList({ store, ...props }) {
+	const context = useTabProviderContext();
+	store = store || context;
+	invariant(store, "TabList must receive a `store` prop or be wrapped in a TabProvider component.");
+	const orientation = useStoreState(store, (state) => state.orientation === "both" ? void 0 : state.orientation);
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(TabScopedContextProvider, {
+		value: store,
+		children: element
+	}), [store]);
+	if (store.composite) props = {
+		focusable: false,
+		...props
+	};
+	props = {
+		role: "tablist",
+		"aria-orientation": orientation,
+		...props
+	};
+	props = useComposite({
+		store,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a composite tab list wrapper for
+* [`Tab`](https://ariakit.com/reference/tab) elements.
+* @see https://ariakit.com/components/tab
+* @example
+* ```jsx {2-5}
+* <TabProvider>
+*   <TabList>
+*     <Tab>Tab 1</Tab>
+*     <Tab>Tab 2</Tab>
+*   </TabList>
+*   <TabPanel>Panel 1</TabPanel>
+*   <TabPanel>Panel 2</TabPanel>
+* </TabProvider>
+* ```
+*/
+const TabList = forwardRef(function TabList(props) {
+	return createElement(TagName, useTabList(props));
+});
+//#endregion
+export { TabList, useTabList };
+
+//# sourceMappingURL=tab-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.js","names":[],"sources":["../../src/tab/tab-list.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useWrapElement,\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 { useComposite } from \"../composite/composite.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;\n\n/**\n * Returns props to create a `TabList` component.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx\n * const store = useTabStore();\n * const props = useTabList({ store });\n * <Role {...props}>\n *   <Tab>Tab 1</Tab>\n *   <Tab>Tab 2</Tab>\n * </Role>\n * <TabPanel store={store}>Panel 1</TabPanel>\n * <TabPanel store={store}>Panel 2</TabPanel>\n * ```\n */\nexport const useTabList = createHook<TagName, TabListOptions>(\n  function useTabList({ store, ...props }) {\n    const context = useTabProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"TabList must receive a `store` prop or be wrapped in a TabProvider component.\",\n    );\n\n    const orientation = useStoreState(store, (state) =>\n      state.orientation === \"both\" ? undefined : state.orientation,\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <TabScopedContextProvider value={store}>\n          {element}\n        </TabScopedContextProvider>\n      ),\n      [store],\n    );\n\n    // If the tab list is rendered as part of another composite widget such as\n    // combobox, it should not be focusable.\n    if (store.composite) {\n      props = {\n        focusable: false,\n        ...props,\n      };\n    }\n\n    props = {\n      role: \"tablist\",\n      \"aria-orientation\": orientation,\n      ...props,\n    };\n\n    props = useComposite({ store, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a composite tab list wrapper for\n * [`Tab`](https://ariakit.com/reference/tab) elements.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx {2-5}\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 TabList = forwardRef(function TabList(props: TabListProps) {\n  const htmlProps = useTabList(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface TabListOptions<\n  T extends ElementType = TagName,\n> extends CompositeOptions<T> {\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\nexport type TabListProps<T extends ElementType = TagName> = Props<\n  T,\n  TabListOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;MAsCI,aAAgB,WAAA,SAAsB,WAAA,EAAA,OAAA,GAAA,SAAA;CACtC,MAAA,UAAQ,sBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,+EACuC;CAG7C,MAAA,cAAQ,cAEL,QAAA,UACC,MAAA,gBAAC,SAAA,KAAA,IAAD,MAAA,WAAA;SAAiC,eAAA,QAAA,YAAA,oBAAA,0BAAA;;EAEP,UAG9B;CAIA,CAAA,GAAI,CAAA,KAAM,CAAA;KAEN,MAAA,WAAW,QAAA;EACX,WAAG;EACL,GAAA;CAGF;SACQ;EACN,MAAA;EACA,oBAAG;EACL,GAAA;CAEA;SAAuB,aAAA;EAAO;EAAU,GAAA;CAExC,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;MAoBE,UAAO,WAAc,SADH,QAAW,OACU;CACxC,OAAA,cAAA,SAAA,WAAA,KAAA,CAAA"}

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

@@ -0,0 +1,122 @@
+import { n as FocusableOptions } from "../focusable-B00tOxtB.js";
+import { n as CollectionItemOptions } from "../collection-item-C-g2BwVF.js";
+import { n as DisclosureContentOptions } from "../disclosure-content-BbPkZgAc.js";
+import { TabStore } from "./tab-store.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, RefObject } from "react";
+
+//#region src/tab/tab-panel.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `TabPanel` component.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx
+ * const store = useTabStore();
+ * const props = useTabPanel({ store });
+ * <TabList store={store}>
+ *   <Tab>Tab 1</Tab>
+ * </TabList>
+ * <Role {...props}>Panel 1</Role>
+ * ```
+ */
+declare const useTabPanel: import("@ariakit/react-utils").Hook<"div", TabPanelOptions<"div">>;
+/**
+ * Renders a tab panel element that's controlled by a
+ * [`Tab`](https://ariakit.com/reference/tab) component.
+ *
+ * If the [`tabId`](https://ariakit.com/reference/tab-panel#tabid) prop isn't
+ * provided, the tab panel will automatically associate with a
+ * [`Tab`](https://ariakit.com/reference/tab) based on its position in the DOM.
+ * Alternatively, you can render a single tab panel with a dynamic
+ * [`tabId`](https://ariakit.com/reference/tab-panel#tabid) value pointing to
+ * the selected tab.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx {6,7}
+ * <TabProvider>
+ *   <TabList>
+ *     <Tab>Tab 1</Tab>
+ *     <Tab>Tab 2</Tab>
+ *   </TabList>
+ *   <TabPanel>Panel 1</TabPanel>
+ *   <TabPanel>Panel 2</TabPanel>
+ * </TabProvider>
+ * ```
+ */
+declare const TabPanel: (props: TabPanelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface TabPanelOptions<T extends ElementType = TagName> extends FocusableOptions<T>, CollectionItemOptions<T>, Omit<DisclosureContentOptions<T>, "store"> {
+  /**
+   * Object returned by the
+   * [`useTabStore`](https://ariakit.com/reference/use-tab-store) hook. If not
+   * provided, the closest
+   * [`TabProvider`](https://ariakit.com/reference/tab-provider) component's
+   * context will be used.
+   */
+  store?: TabStore;
+  /**
+   * The [`id`](https://ariakit.com/reference/tab#id) of the tab controlling
+   * this panel. This connection is used to assign the `aria-labelledby`
+   * attribute to the tab panel and to determine if the tab panel should be
+   * visible.
+   *
+   * This link is automatically established by matching the order of
+   * [`Tab`](https://ariakit.com/reference/tab) and
+   * [`TabPanel`](https://ariakit.com/reference/tab-panel) elements in the DOM.
+   * If you're rendering a single tab panel, this can be set to a dynamic value
+   * that refers to the selected tab.
+   *
+   * Live examples:
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * - [Tab with React Router](https://ariakit.com/examples/tab-react-router)
+   * - [Animated TabPanel](https://ariakit.com/examples/tab-panel-animated)
+   * - [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)
+   */
+  tabId?: string | null;
+  /**
+   * Manages the scrolling behavior of the tab panel when it is hidden and then
+   * shown again.
+   *
+   * This is especially useful when using a single tab panel for multiple tabs,
+   * where you dynamically change the
+   * [`tabId`](https://ariakit.com/reference/tab-panel#tabid) prop and the
+   * panel's children, which would otherwise retain the current scroll position
+   * when switching tabs.
+   *
+   * When set to `true`, the component will save the scroll position and restore
+   * it when the panel is shown again. When set to `"reset"`, the scroll
+   * position will reset to the top when the panel is displayed again.
+   *
+   * The default scroll element is the tab panel itself. To scroll a different
+   * element, use the
+   * [`scrollElement`](https://ariakit.com/reference/tab-panel#scrollelement)
+   * prop.
+   * @default false
+   */
+  scrollRestoration?: boolean | "reset";
+  /**
+   * When using the
+   * [`scrollRestoration`](https://ariakit.com/reference/tab-panel#scrollrestoration)
+   * prop, the tab panel element serves as the default scroll element. You can
+   * use this prop to designate a different element for scrolling.
+   *
+   * If a function is provided, it will be called with the tab panel element as
+   * an argument. The function should return the element to scroll.
+   * @example
+   * ```jsx
+   * <TabPanel
+   *   scrollRestoration
+   *   scrollElement={(panel) => panel.querySelector(".scrollable")}
+   * />
+   * ```
+   */
+  scrollElement?: HTMLElement | RefObject<HTMLElement | null> | ((panel: HTMLElement) => HTMLElement | null);
+}
+type TabPanelProps<T extends ElementType = TagName> = Props<T, TabPanelOptions<T>>;
+//#endregion
+export { TabPanel, TabPanelOptions, TabPanelProps, useTabPanel };
+//# sourceMappingURL=tab-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.d.ts","names":["Props","ElementType","RefObject","CollectionItemOptions","DisclosureContentOptions","FocusableOptions","TabStore","TagName","useTabPanel","TabPanelOptions","Hook","TabPanel","TabPanelProps","props","ReactElement","JSXElementConstructor","T","HTMLElement","Omit","store","tabId","scrollRestoration","scrollElement","panel"],"sources":["../../src/tab/tab-panel.d.ts"],"mappings":";;;;;;;;cAMcO,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkB;;;;AAC1B;AAAA;;;;AACQ;AAc7B;;;AAhB+C,cAgB1BC,WAAAA,iCAA4CE,IAAAA,QAAYD,eAAe;AAAA;AAwB5F;;;;;;;;;AAAyI;AACzI;;;;;;;;;;;;AAzB4F,cAwBvEE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnGN,eAAAA,WAA0BR,WAAAA,GAAcM,OAAAA,UAAiBF,gBAAAA,CAAiBW,CAAAA,GAAIb,qBAAAA,CAAsBa,CAAAA,GAAIE,IAAAA,CAAKd,wBAAAA,CAAyBY,CAAAA;EAoE5DC;;;;;;;EA5DvFE,KAAAA,GAAQb,QAAAA;EAR6CC;;;;;;;;;;;;;;;;;;;;AAoE6C;EAtClGa,KAAAA;EAwCqB;;;;;;;;;;;;;;;;;;AAA8D;;EAnBnFC,iBAAAA;;;;;;;;;;;;;;;;;EAiBAC,aAAAA,GAAgBL,WAAAA,GAAcf,SAAAA,CAAUe,WAAAA,aAAwBM,KAAAA,EAAON,WAAAA,KAAgBA,WAAAA;AAAAA;AAAAA,KAE/EL,aAAAA,WAAwBX,WAAAA,GAAcM,OAAAA,IAAWP,KAAAA,CAAMgB,CAAAA,EAAGP,eAAAA,CAAgBO,CAAAA"}

package/dist/tab/tab-panel.js

@@ -0,0 +1,169 @@
+"use client";
+import { useFocusable } from "../focusable/focusable.js";
+import { useCollectionItem } from "../collection/collection-item.js";
+import { useDisclosureContent } from "../disclosure/disclosure-content.js";
+import { useDisclosureStore } from "../disclosure/disclosure-store.js";
+import { TabScopedContextProvider, useTabProviderContext } from "./tab-context.js";
+import { createElement, createHook, forwardRef, useEvent, useId, useMergeRefs, useSafeLayoutEffect, useWrapElement } from "@ariakit/react-utils";
+import { getAllTabbableIn, invariant } from "@ariakit/utils";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/tab/tab-panel.tsx
+const TagName = "div";
+/**
+* Returns props to create a `TabPanel` component.
+* @see https://ariakit.com/components/tab
+* @example
+* ```jsx
+* const store = useTabStore();
+* const props = useTabPanel({ store });
+* <TabList store={store}>
+*   <Tab>Tab 1</Tab>
+* </TabList>
+* <Role {...props}>Panel 1</Role>
+* ```
+*/
+const useTabPanel = createHook(function useTabPanel({ store, unmountOnHide, tabId: tabIdProp, getItem: getItemProp, scrollRestoration, scrollElement, ...props }) {
+	const context = useTabProviderContext();
+	store = store || context;
+	invariant(store, "TabPanel must receive a `store` prop or be wrapped in a TabProvider component.");
+	const ref = useRef(null);
+	const id = useId(props.id);
+	const tabId = useStoreState(store.panels, () => tabIdProp || store?.panels.item(id)?.tabId);
+	const disclosure = useDisclosureStore({ open: useStoreState(store, (state) => !!tabId && state.selectedId === tabId) });
+	const mounted = useStoreState(disclosure, "mounted");
+	const scrollPositionRef = useRef(/* @__PURE__ */ new Map());
+	const getScrollElement = useEvent(() => {
+		const panelElement = ref.current;
+		if (!panelElement) return null;
+		if (!scrollElement) return panelElement;
+		if (typeof scrollElement === "function") return scrollElement(panelElement);
+		if ("current" in scrollElement) return scrollElement.current;
+		return scrollElement;
+	});
+	useEffect(() => {
+		if (!scrollRestoration) return;
+		if (!mounted) return;
+		const element = getScrollElement();
+		if (!element) return;
+		if (scrollRestoration === "reset") {
+			element.scroll(0, 0);
+			return;
+		}
+		if (!tabId) return;
+		const position = scrollPositionRef.current.get(tabId);
+		element.scroll(position?.x ?? 0, position?.y ?? 0);
+		const onScroll = () => {
+			scrollPositionRef.current.set(tabId, {
+				x: element.scrollLeft,
+				y: element.scrollTop
+			});
+		};
+		element.addEventListener("scroll", onScroll);
+		return () => {
+			element.removeEventListener("scroll", onScroll);
+		};
+	}, [
+		scrollRestoration,
+		mounted,
+		tabId,
+		getScrollElement,
+		store
+	]);
+	const [hasTabbableChildren, setHasTabbableChildren] = useState(false);
+	useSafeLayoutEffect(() => {
+		if (!mounted) return;
+		const element = ref.current;
+		if (!element) return;
+		setHasTabbableChildren(!!getAllTabbableIn(element).length);
+	}, [mounted]);
+	const getItem = useCallback((item) => {
+		const nextItem = {
+			...item,
+			id: id || item.id,
+			tabId: tabIdProp
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [
+		id,
+		tabIdProp,
+		getItemProp
+	]);
+	const onKeyDownProp = props.onKeyDown;
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store?.composite) return;
+		const action = {
+			ArrowLeft: store.previous,
+			ArrowRight: store.next,
+			Home: store.first,
+			End: store.last
+		}[event.key];
+		if (!action) return;
+		const { selectedId } = store.getState();
+		const nextId = action({ activeId: selectedId });
+		if (!nextId) return;
+		event.preventDefault();
+		store.move(nextId);
+	});
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(TabScopedContextProvider, {
+		value: store,
+		children: element
+	}), [store]);
+	props = {
+		role: "tabpanel",
+		"aria-labelledby": props["aria-label"] != null ? void 0 : tabId || void 0,
+		...props,
+		id,
+		children: unmountOnHide && !mounted ? null : props.children,
+		ref: useMergeRefs(ref, props.ref),
+		onKeyDown
+	};
+	props = useFocusable({
+		focusable: !store.composite && !hasTabbableChildren,
+		...props
+	});
+	props = useDisclosureContent({
+		store: disclosure,
+		...props
+	});
+	props = useCollectionItem({
+		store: store.panels,
+		...props,
+		getItem
+	});
+	return props;
+});
+/**
+* Renders a tab panel element that's controlled by a
+* [`Tab`](https://ariakit.com/reference/tab) component.
+*
+* If the [`tabId`](https://ariakit.com/reference/tab-panel#tabid) prop isn't
+* provided, the tab panel will automatically associate with a
+* [`Tab`](https://ariakit.com/reference/tab) based on its position in the DOM.
+* Alternatively, you can render a single tab panel with a dynamic
+* [`tabId`](https://ariakit.com/reference/tab-panel#tabid) value pointing to
+* the selected tab.
+* @see https://ariakit.com/components/tab
+* @example
+* ```jsx {6,7}
+* <TabProvider>
+*   <TabList>
+*     <Tab>Tab 1</Tab>
+*     <Tab>Tab 2</Tab>
+*   </TabList>
+*   <TabPanel>Panel 1</TabPanel>
+*   <TabPanel>Panel 2</TabPanel>
+* </TabProvider>
+* ```
+*/
+const TabPanel = forwardRef(function TabPanel(props) {
+	return createElement(TagName, useTabPanel(props));
+});
+//#endregion
+export { TabPanel, useTabPanel };
+
+//# sourceMappingURL=tab-panel.js.map

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

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

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

@@ -0,0 +1,26 @@
+import { TabStoreProps } from "./tab-store.js";
+import { ReactNode } from "react";
+
+//#region src/tab/tab-provider.d.ts
+/**
+ * Provides a tab store to [Tab](https://ariakit.com/components/tab) components.
+ * @see https://ariakit.com/components/tab
+ * @example
+ * ```jsx
+ * <TabProvider>
+ *   <TabList>
+ *     <Tab>For You</Tab>
+ *     <Tab>Following</Tab>
+ *   </TabList>
+ *   <TabPanel>For You</TabPanel>
+ *   <TabPanel>Following</TabPanel>
+ * </TabProvider>
+ * ```
+ */
+declare function TabProvider(props?: TabProviderProps): import("react/jsx-runtime").JSX.Element;
+interface TabProviderProps extends TabStoreProps {
+  children?: ReactNode;
+}
+//#endregion
+export { TabProvider, TabProviderProps };
+//# sourceMappingURL=tab-provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-provider.d.ts","names":["ReactNode","TabStoreProps","TabProvider","TabProviderProps","props","JSX","Element","children"],"sources":["../../src/tab/tab-provider.d.ts"],"mappings":";;;;;;AAiBA;;;;;;;;;AAAsG;AACtG;;;iBADwBE,WAAAA,CAAYE,KAAAA,GAAQD,gBAAgB,+BAA+BE,GAAAA,CAAIC,OAAAA;AAAAA,UAC9EH,gBAAAA,SAAyBF,aAAa;EACnDM,QAAAA,GAAWP,SAAAA;AAAAA"}

package/dist/tab/tab-provider.js

@@ -0,0 +1,30 @@
+"use client";
+import { TabContextProvider } from "./tab-context.js";
+import { useTabStore } from "./tab-store.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/tab/tab-provider.tsx
+/**
+* Provides a tab store to [Tab](https://ariakit.com/components/tab) components.
+* @see https://ariakit.com/components/tab
+* @example
+* ```jsx
+* <TabProvider>
+*   <TabList>
+*     <Tab>For You</Tab>
+*     <Tab>Following</Tab>
+*   </TabList>
+*   <TabPanel>For You</TabPanel>
+*   <TabPanel>Following</TabPanel>
+* </TabProvider>
+* ```
+*/
+function TabProvider(props = {}) {
+	return /* @__PURE__ */ jsx(TabContextProvider, {
+		value: useTabStore(props),
+		children: props.children
+	});
+}
+//#endregion
+export { TabProvider };
+
+//# sourceMappingURL=tab-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tab-provider.js","names":[],"sources":["../../src/tab/tab-provider.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { TabContextProvider } from \"./tab-context.tsx\";\nimport type { TabStoreProps } from \"./tab-store.ts\";\nimport { useTabStore } from \"./tab-store.ts\";\n\n/**\n * Provides a tab store to [Tab](https://ariakit.com/components/tab) components.\n * @see https://ariakit.com/components/tab\n * @example\n * ```jsx\n * <TabProvider>\n *   <TabList>\n *     <Tab>For You</Tab>\n *     <Tab>Following</Tab>\n *   </TabList>\n *   <TabPanel>For You</TabPanel>\n *   <TabPanel>Following</TabPanel>\n * </TabProvider>\n * ```\n */\nexport function TabProvider(props: TabProviderProps = {}) {\n  const store = useTabStore(props);\n  return (\n    <TabContextProvider value={store}>{props.children}</TabContextProvider>\n  );\n}\n\nexport interface TabProviderProps extends TabStoreProps {\n  children?: ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;SAuBI,YAAA,QAAC,CAAA,GAAA;QAFuB,oBAEO,oBAAA;qBAAU,KAAA;EAA6B,UAAA,MAAA;CAE1E,CAAA"}