@funstack/ui 0.0.0-stage → 0.1.0-alpha.1

package/dist/tabs/tabs-ids.mjs

@@ -0,0 +1,39 @@
+//#region src/tabs/tabs-ids.ts
+/**
+* Id derivation for Tabs (design section 6). Every part derives its ids from the Root's `useId`
+* and the tab `value`, so there is no registration pass and no extra render.
+*
+* No `"use client"` directive: pure functions, importable from anywhere (conventions 7.1).
+*/
+function escapeChar(char) {
+	return `_${(char.codePointAt(0) ?? 0).toString(16)}_`;
+}
+/**
+* Makes `value` safe as both an HTML id fragment and a CSS dashed-ident suffix. Every character
+* outside `[A-Za-z0-9-]` becomes `_<hex code point>_`. `_` itself is escaped too (`_5f_`), so the
+* mapping is injective: `"a b"` and `"a_20_"` never share an id.
+*/
+function slug(value) {
+	return value.replace(/[^A-Za-z0-9-]/gu, escapeChar);
+}
+/**
+* The Root id from `useId` (`_r_1_` on React 19.3) is already a valid id and CSS ident; anything
+* else (a custom `identifierPrefix`) is escaped defensively for the anchor name, keeping `_`.
+*/
+function cssSafeRootId(rootId) {
+	return rootId.replace(/[^A-Za-z0-9_-]/gu, escapeChar);
+}
+function tabId(rootId, value) {
+	return `${rootId}-tab-${slug(value)}`;
+}
+function panelId(rootId, value) {
+	return `${rootId}-panel-${slug(value)}`;
+}
+/** `anchor-name` of a Tab, and `position-anchor` of the Indicator that points at it. */
+function anchorName(rootId, value) {
+	return `--fsui-tab-${cssSafeRootId(rootId)}-tab-${slug(value)}`;
+}
+//#endregion
+export { anchorName, panelId, slug, tabId };
+
+//# sourceMappingURL=tabs-ids.mjs.map

package/dist/tabs/tabs-ids.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-ids.mjs","names":[],"sources":["../../src/tabs/tabs-ids.ts"],"sourcesContent":["/**\n * Id derivation for Tabs (design section 6). Every part derives its ids from the Root's `useId`\n * and the tab `value`, so there is no registration pass and no extra render.\n *\n * No `\"use client\"` directive: pure functions, importable from anywhere (conventions 7.1).\n */\n\nfunction escapeChar(char: string): string {\n  return `_${(char.codePointAt(0) ?? 0).toString(16)}_`;\n}\n\n/**\n * Makes `value` safe as both an HTML id fragment and a CSS dashed-ident suffix. Every character\n * outside `[A-Za-z0-9-]` becomes `_<hex code point>_`. `_` itself is escaped too (`_5f_`), so the\n * mapping is injective: `\"a b\"` and `\"a_20_\"` never share an id.\n */\nexport function slug(value: string): string {\n  return value.replace(/[^A-Za-z0-9-]/gu, escapeChar);\n}\n\n/**\n * The Root id from `useId` (`_r_1_` on React 19.3) is already a valid id and CSS ident; anything\n * else (a custom `identifierPrefix`) is escaped defensively for the anchor name, keeping `_`.\n */\nfunction cssSafeRootId(rootId: string): string {\n  return rootId.replace(/[^A-Za-z0-9_-]/gu, escapeChar);\n}\n\nexport function tabId(rootId: string, value: string): string {\n  return `${rootId}-tab-${slug(value)}`;\n}\n\nexport function panelId(rootId: string, value: string): string {\n  return `${rootId}-panel-${slug(value)}`;\n}\n\n/** `anchor-name` of a Tab, and `position-anchor` of the Indicator that points at it. */\nexport function anchorName(rootId: string, value: string): `--${string}` {\n  return `--fsui-tab-${cssSafeRootId(rootId)}-tab-${slug(value)}`;\n}\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW,MAAsB;CACxC,OAAO,KAAK,KAAK,YAAY,CAAC,KAAK,EAAA,CAAG,SAAS,EAAE,EAAE;AACrD;;;;;;AAOA,SAAgB,KAAK,OAAuB;CAC1C,OAAO,MAAM,QAAQ,mBAAmB,UAAU;AACpD;;;;;AAMA,SAAS,cAAc,QAAwB;CAC7C,OAAO,OAAO,QAAQ,oBAAoB,UAAU;AACtD;AAEA,SAAgB,MAAM,QAAgB,OAAuB;CAC3D,OAAO,GAAG,OAAO,OAAO,KAAK,KAAK;AACpC;AAEA,SAAgB,QAAQ,QAAgB,OAAuB;CAC7D,OAAO,GAAG,OAAO,SAAS,KAAK,KAAK;AACtC;;AAGA,SAAgB,WAAW,QAAgB,OAA8B;CACvE,OAAO,cAAc,cAAc,MAAM,EAAE,OAAO,KAAK,KAAK;AAC9D"}

package/dist/tabs/tabs-indicator.d.mts

@@ -0,0 +1,32 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { TabsOrientation } from "./tabs-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/tabs/tabs-indicator.d.ts
+export interface TabsIndicatorState {
+  /** Optimistic selected value, or `null` (the indicator is then `hidden`). */
+  readonly value: string | null;
+  readonly pending: boolean;
+  readonly orientation: TabsOrientation;
+}
+export interface TabsIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "hidden" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, TabsIndicatorState>;
+  style?: StateValue<CSSProperties | undefined, TabsIndicatorState>;
+  children?: StateValue<ReactNode, TabsIndicatorState>;
+  render?: RenderProp<ComponentPropsWithRef<"span">, TabsIndicatorState>;
+}
+/**
+ * A decorative marker that follows the optimistic selection. Positioned by CSS Anchor
+ * Positioning: it sets `position-anchor` to the selected Tab's `anchor-name`; the consumer's CSS
+ * gives it `position: absolute` and `anchor()` insets, and a CSS `transition` on those insets
+ * slides it. It must come after the Tabs inside `Tabs.List` (an anchor must precede the
+ * positioned element in tree order). No `<ViewTransition>`: it changes only in optimistic (sync)
+ * commits, which never start a view transition (design 10.1).
+ *
+ * Owned keys (conventions 1.2): `aria-hidden`, `hidden`, `data-selected`, `data-pending`.
+ */
+export declare function TabsIndicator({ className, style, children, render, ...rest }: TabsIndicatorProps): ReactNode;
+export declare namespace TabsIndicator {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=tabs-indicator.d.mts.map

package/dist/tabs/tabs-indicator.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-indicator.d.mts","names":[],"sources":["../../src/tabs/tabs-indicator.tsx"],"mappings":";;;;iBASiB;;WAEN;WACA;WACA,aAAa;;iBAGP,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;;;;;;;;wBAarC,gBAAgB,WAAW,OAAO,UAAU,WAAW,QAAQ,qBAAkB;yBAAjF"}

package/dist/tabs/tabs-indicator.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { useTabsContext } from "./tabs-context.mjs";
+import { anchorName } from "./tabs-ids.mjs";
+//#region src/tabs/tabs-indicator.tsx
+/**
+* A decorative marker that follows the optimistic selection. Positioned by CSS Anchor
+* Positioning: it sets `position-anchor` to the selected Tab's `anchor-name`; the consumer's CSS
+* gives it `position: absolute` and `anchor()` insets, and a CSS `transition` on those insets
+* slides it. It must come after the Tabs inside `Tabs.List` (an anchor must precede the
+* positioned element in tree order). No `<ViewTransition>`: it changes only in optimistic (sync)
+* commits, which never start a view transition (design 10.1).
+*
+* Owned keys (conventions 1.2): `aria-hidden`, `hidden`, `data-selected`, `data-pending`.
+*/
+function TabsIndicator({ className, style, children, render, ...rest }) {
+	const ctx = useTabsContext("Tabs.Indicator");
+	const value = ctx.optimistic;
+	const state = {
+		value,
+		pending: ctx.pending,
+		orientation: ctx.orientation
+	};
+	const anchor = value === null ? void 0 : anchorName(ctx.rootId, value);
+	return useRender({
+		defaultElement: "span",
+		render,
+		state,
+		className,
+		style: (s) => ({
+			positionAnchor: anchor,
+			...resolveStateValue(style, s)
+		}),
+		children,
+		props: rest,
+		libraryProps: {
+			"aria-hidden": true,
+			hidden: value === null,
+			"data-selected": dataAttr(value !== null),
+			"data-pending": dataAttr(ctx.pending)
+		}
+	});
+}
+TabsIndicator.displayName = "TabsIndicator";
+//#endregion
+export { TabsIndicator };
+
+//# sourceMappingURL=tabs-indicator.mjs.map

package/dist/tabs/tabs-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-indicator.mjs","names":[],"sources":["../../src/tabs/tabs-indicator.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport { useTabsContext } from \"./tabs-context.js\";\nimport type { TabsOrientation } from \"./tabs-context.js\";\nimport { anchorName } from \"./tabs-ids.js\";\n\nexport interface TabsIndicatorState {\n  /** Optimistic selected value, or `null` (the indicator is then `hidden`). */\n  readonly value: string | null;\n  readonly pending: boolean;\n  readonly orientation: TabsOrientation;\n}\n\nexport interface TabsIndicatorProps extends Omit<\n  ComponentPropsWithRef<\"span\">,\n  \"hidden\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, TabsIndicatorState>;\n  style?: StateValue<CSSProperties | undefined, TabsIndicatorState>;\n  children?: StateValue<ReactNode, TabsIndicatorState>;\n  render?: RenderProp<ComponentPropsWithRef<\"span\">, TabsIndicatorState>;\n}\n\n/**\n * A decorative marker that follows the optimistic selection. Positioned by CSS Anchor\n * Positioning: it sets `position-anchor` to the selected Tab's `anchor-name`; the consumer's CSS\n * gives it `position: absolute` and `anchor()` insets, and a CSS `transition` on those insets\n * slides it. It must come after the Tabs inside `Tabs.List` (an anchor must precede the\n * positioned element in tree order). No `<ViewTransition>`: it changes only in optimistic (sync)\n * commits, which never start a view transition (design 10.1).\n *\n * Owned keys (conventions 1.2): `aria-hidden`, `hidden`, `data-selected`, `data-pending`.\n */\nexport function TabsIndicator({ className, style, children, render, ...rest }: TabsIndicatorProps) {\n  const ctx = useTabsContext(\"Tabs.Indicator\");\n  const value = ctx.optimistic;\n  const state: TabsIndicatorState = {\n    value,\n    pending: ctx.pending,\n    orientation: ctx.orientation,\n  };\n  const anchor = value === null ? undefined : anchorName(ctx.rootId, value);\n\n  return useRender<ComponentPropsWithRef<\"span\">, TabsIndicatorState>({\n    defaultElement: \"span\",\n    render,\n    state,\n    className,\n    // `position-anchor` sits under the consumer's style: the consumer wins.\n    style: (s) => ({ positionAnchor: anchor, ...resolveStateValue(style, s) }),\n    children,\n    props: rest,\n    libraryProps: {\n      \"aria-hidden\": true,\n      hidden: value === null,\n      \"data-selected\": dataAttr(value !== null),\n      \"data-pending\": dataAttr(ctx.pending),\n    },\n  });\n}\n\nTabsIndicator.displayName = \"TabsIndicator\";\n"],"mappings":";;;;;;;;;;;;;;;;AAoCA,SAAgB,cAAc,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA4B;CACjG,MAAM,MAAM,eAAe,gBAAgB;CAC3C,MAAM,QAAQ,IAAI;CAClB,MAAM,QAA4B;EAChC;EACA,SAAS,IAAI;EACb,aAAa,IAAI;CACnB;CACA,MAAM,SAAS,UAAU,OAAO,KAAA,IAAY,WAAW,IAAI,QAAQ,KAAK;CAExE,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA;EACA;EAEA,QAAQ,OAAO;GAAE,gBAAgB;GAAQ,GAAG,kBAAkB,OAAO,CAAC;EAAE;EACxE;EACA,OAAO;EACP,cAAc;GACZ,eAAe;GACf,QAAQ,UAAU;GAClB,iBAAiB,SAAS,UAAU,IAAI;GACxC,gBAAgB,SAAS,IAAI,OAAO;EACtC;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/tabs/tabs-list.d.mts

@@ -0,0 +1,34 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { TabsOrientation } from "./tabs-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/tabs/tabs-list.d.ts
+export interface TabsListState {
+  readonly orientation: TabsOrientation;
+  readonly disabled: boolean;
+}
+export interface TabsListProps extends Omit<ComponentPropsWithRef<"div">, "onKeyDown" | "onFocus" | "className" | "style" | "children"> {
+  /**
+   * Render `focusgroup="tablist …"` and, where the browser implements it, let the browser handle
+   * arrow keys, Home and End. Chromium 150+ only; elsewhere the JS path stays active.
+   * Default `false`.
+   */
+  experimental_focusgroup?: boolean;
+  className?: StateValue<string | undefined, TabsListState>;
+  style?: StateValue<CSSProperties | undefined, TabsListState>;
+  children?: StateValue<ReactNode, TabsListState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, TabsListState>;
+}
+/**
+ * The `role="tablist"` container. Owns arrow-key / Home / End navigation between Tabs: it only
+ * moves focus; automatic activation happens in the Tab's focus handler.
+ *
+ * Owned keys (a `render` element cannot override them, conventions 1.2): `role`,
+ * `aria-orientation`, `data-orientation`, `data-disabled`, `tabIndex`, `onKeyDown`, `onFocus`,
+ * and `focusgroup` when `experimental_focusgroup` is on.
+ */
+export declare function TabsList({ experimental_focusgroup, className, style, children, render, ...rest }: TabsListProps): import("react").JSX.Element;
+export declare namespace TabsList {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=tabs-list.d.mts.map

package/dist/tabs/tabs-list.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-list.d.mts","names":[],"sources":["../../src/tabs/tabs-list.tsx"],"mappings":";;;;iBAgBiB;WACN,aAAa;WACb;;iBAGM,sBAAsB,KACrC;;;;;;EAQA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;wBA+CpC,WACd,yBACA,WACA,OACA,UACA,WACG,QACF,gCAAa,IAAA;yBAPA"}

package/dist/tabs/tabs-list.mjs

@@ -0,0 +1,130 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { TabsListContext, useTabsContext } from "./tabs-context.mjs";
+import { useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/tabs/tabs-list.tsx
+function resolveKey(key, orientation, rtl) {
+	switch (key) {
+		case "Home": return "first";
+		case "End": return "last";
+		case "ArrowRight": return orientation === "horizontal" ? rtl ? "prev" : "next" : null;
+		case "ArrowLeft": return orientation === "horizontal" ? rtl ? "next" : "prev" : null;
+		case "ArrowDown": return orientation === "vertical" ? "next" : null;
+		case "ArrowUp": return orientation === "vertical" ? "prev" : null;
+		default: return null;
+	}
+}
+/** The tabs that belong to `list` (not to a nested tablist), in DOM order. Disabled included. */
+function tabsOf(list) {
+	return Array.from(list.querySelectorAll("[role=\"tab\"]")).filter((tab) => tab.closest("[role=\"tablist\"]") === list);
+}
+function focusTab(tab) {
+	tab.focus({ focusVisible: true });
+}
+/** Engine capabilities never change while the page lives. */
+const subscribeNever = () => () => {};
+/**
+* The `role="tablist"` container. Owns arrow-key / Home / End navigation between Tabs: it only
+* moves focus; automatic activation happens in the Tab's focus handler.
+*
+* Owned keys (a `render` element cannot override them, conventions 1.2): `role`,
+* `aria-orientation`, `data-orientation`, `data-disabled`, `tabIndex`, `onKeyDown`, `onFocus`,
+* and `focusgroup` when `experimental_focusgroup` is on.
+*/
+function TabsList({ experimental_focusgroup = false, className, style, children, render, ...rest }) {
+	const { orientation, loop, disabled, optimistic } = useTabsContext("Tabs.List");
+	const nativeFocusgroup = useSyncExternalStore(subscribeNever, () => experimental_focusgroup && "focusGroup" in HTMLElement.prototype, () => false);
+	const listContext = useMemo(() => ({
+		focusgroup: experimental_focusgroup,
+		nativeFocusgroup
+	}), [experimental_focusgroup, nativeFocusgroup]);
+	const listRef = useRef(null);
+	const [unmatched, setUnmatched] = useState(false);
+	useLayoutEffect(() => {
+		const list = listRef.current;
+		const next = optimistic !== null && list !== null && !tabsOf(list).some((tab) => tab.getAttribute("tabindex") === "0");
+		if (next !== unmatched) setUnmatched(next);
+	}, [
+		optimistic,
+		children,
+		unmatched
+	]);
+	useDevWarning(unmatched, `Tabs: the value ${JSON.stringify(optimistic)} matches no Tabs.Tab. No tab is selected; the tablist itself is the tab stop. Pass null to select nothing on purpose.`);
+	const listIsTabStop = optimistic === null || unmatched;
+	const state = {
+		orientation,
+		disabled
+	};
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		const list = event.currentTarget;
+		const target = event.target;
+		if (target.getAttribute("role") !== "tab" || target.closest("[role=\"tablist\"]") !== list) return;
+		const rtl = orientation === "horizontal" && getComputedStyle(list).direction === "rtl";
+		const move = resolveKey(event.key, orientation, rtl);
+		if (move === null) return;
+		if (nativeFocusgroup) return;
+		event.preventDefault();
+		const tabs = tabsOf(list);
+		if (tabs.length === 0) return;
+		const index = tabs.indexOf(target);
+		const last = tabs.length - 1;
+		let nextIndex;
+		switch (move) {
+			case "first":
+				nextIndex = 0;
+				break;
+			case "last":
+				nextIndex = last;
+				break;
+			case "next":
+				nextIndex = index >= last ? loop ? 0 : last : index + 1;
+				break;
+			case "prev": nextIndex = index <= 0 ? loop ? last : 0 : index - 1;
+		}
+		const next = tabs[nextIndex];
+		if (next !== void 0 && next !== target) focusTab(next);
+	};
+	const onFocus = (event) => {
+		const list = event.currentTarget;
+		if (event.target !== list || !listIsTabStop) return;
+		const from = event.relatedTarget;
+		if (from instanceof Node && list.contains(from)) return;
+		const tabs = tabsOf(list);
+		const first = tabs.find((tab) => tab.getAttribute("aria-disabled") !== "true") ?? tabs[0];
+		if (first !== void 0) focusTab(first);
+	};
+	const focusgroup = experimental_focusgroup ? `tablist ${orientation === "vertical" ? "block" : "inline"} ${loop ? "wrap" : "nowrap"} nomemory` : void 0;
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			role: "tablist",
+			"aria-orientation": orientation,
+			"data-orientation": orientation,
+			"data-disabled": dataAttr(disabled),
+			tabIndex: listIsTabStop ? 0 : void 0,
+			...focusgroup !== void 0 && { focusgroup },
+			onKeyDown,
+			onFocus
+		},
+		ref: listRef
+	});
+	return /* @__PURE__ */ jsx(TabsListContext, {
+		value: listContext,
+		children: element
+	});
+}
+TabsList.displayName = "TabsList";
+//#endregion
+export { TabsList };
+
+//# sourceMappingURL=tabs-list.mjs.map

package/dist/tabs/tabs-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-list.mjs","names":[],"sources":["../../src/tabs/tabs-list.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { TabsListContext, useTabsContext } from \"./tabs-context.js\";\nimport type { TabsListContextValue, TabsOrientation } from \"./tabs-context.js\";\n\nexport interface TabsListState {\n  readonly orientation: TabsOrientation;\n  readonly disabled: boolean;\n}\n\nexport interface TabsListProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onKeyDown\" | \"onFocus\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Render `focusgroup=\"tablist …\"` and, where the browser implements it, let the browser handle\n   * arrow keys, Home and End. Chromium 150+ only; elsewhere the JS path stays active.\n   * Default `false`.\n   */\n  experimental_focusgroup?: boolean;\n  className?: StateValue<string | undefined, TabsListState>;\n  style?: StateValue<CSSProperties | undefined, TabsListState>;\n  children?: StateValue<ReactNode, TabsListState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TabsListState>;\n}\n\ntype Move = \"next\" | \"prev\" | \"first\" | \"last\";\n\nfunction resolveKey(key: string, orientation: TabsOrientation, rtl: boolean): Move | null {\n  switch (key) {\n    case \"Home\":\n      return \"first\";\n    case \"End\":\n      return \"last\";\n    case \"ArrowRight\":\n      return orientation === \"horizontal\" ? (rtl ? \"prev\" : \"next\") : null;\n    case \"ArrowLeft\":\n      return orientation === \"horizontal\" ? (rtl ? \"next\" : \"prev\") : null;\n    case \"ArrowDown\":\n      return orientation === \"vertical\" ? \"next\" : null;\n    case \"ArrowUp\":\n      return orientation === \"vertical\" ? \"prev\" : null;\n    default:\n      return null;\n  }\n}\n\n/** The tabs that belong to `list` (not to a nested tablist), in DOM order. Disabled included. */\nfunction tabsOf(list: Element): HTMLElement[] {\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n    (tab) => tab.closest('[role=\"tablist\"]') === list,\n  );\n}\n\nfunction focusTab(tab: HTMLElement): void {\n  // `focusVisible` shows the ring even where the engine's heuristic would not (survey: adopt).\n  tab.focus({ focusVisible: true } as FocusOptions);\n}\n\n/** Engine capabilities never change while the page lives. */\nconst subscribeNever = () => () => {};\n\n/**\n * The `role=\"tablist\"` container. Owns arrow-key / Home / End navigation between Tabs: it only\n * moves focus; automatic activation happens in the Tab's focus handler.\n *\n * Owned keys (a `render` element cannot override them, conventions 1.2): `role`,\n * `aria-orientation`, `data-orientation`, `data-disabled`, `tabIndex`, `onKeyDown`, `onFocus`,\n * and `focusgroup` when `experimental_focusgroup` is on.\n */\nexport function TabsList({\n  experimental_focusgroup = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsListProps) {\n  const ctx = useTabsContext(\"Tabs.List\");\n  const { orientation, loop, disabled, optimistic } = ctx;\n\n  // Feature detection only when the flag is on, and never during SSR or hydration (conventions\n  // 8): the server snapshot is `false`, so hydration markup matches the server and React re-renders\n  // with the client answer afterwards. The IDL attribute is camel-cased `focusGroup`\n  // (`\"focusgroup\" in HTMLElement.prototype` is always false, issue #43). The Tabs read it too:\n  // they drop `tabindex=\"-1\"` on the native path (TabsListContextValue).\n  const nativeFocusgroup = useSyncExternalStore(\n    subscribeNever,\n    () => experimental_focusgroup && \"focusGroup\" in HTMLElement.prototype,\n    () => false,\n  );\n  const listContext = useMemo<TabsListContextValue>(\n    () => ({ focusgroup: experimental_focusgroup, nativeFocusgroup }),\n    [experimental_focusgroup, nativeFocusgroup],\n  );\n\n  // A value that matches no Tab (a controlled `value` for a route without a tab, design 11.5)\n  // leaves no tab with tabindex=0, so the List takes over as the tab stop exactly as for `null`.\n  // Read from the DOM (Tabs register nowhere) whenever the value or the List's children change; a\n  // Tab added or removed by a component below that re-renders on its own is picked up on the\n  // List's next render. The state only changes when the answer does.\n  const listRef = useRef<HTMLElement | null>(null);\n  const [unmatched, setUnmatched] = useState(false);\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const next =\n      optimistic !== null &&\n      list !== null &&\n      !tabsOf(list).some((tab) => tab.getAttribute(\"tabindex\") === \"0\");\n    if (next !== unmatched) setUnmatched(next);\n  }, [optimistic, children, unmatched]);\n  useDevWarning(\n    unmatched,\n    `Tabs: the value ${JSON.stringify(optimistic)} matches no Tabs.Tab. No tab is selected; the ` +\n      \"tablist itself is the tab stop. Pass null to select nothing on purpose.\",\n  );\n  const listIsTabStop = optimistic === null || unmatched;\n\n  const state: TabsListState = { orientation, disabled };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n    const list = event.currentTarget;\n    const target = event.target as Element;\n    if (target.getAttribute(\"role\") !== \"tab\" || target.closest('[role=\"tablist\"]') !== list) {\n      return;\n    }\n    const rtl = orientation === \"horizontal\" && getComputedStyle(list).direction === \"rtl\";\n    const move = resolveKey(event.key, orientation, rtl);\n    if (move === null) return;\n    // The browser moves focus itself where `focusgroup` is implemented.\n    if (nativeFocusgroup) return;\n\n    event.preventDefault();\n    const tabs = tabsOf(list);\n    if (tabs.length === 0) return;\n    const index = tabs.indexOf(target as HTMLElement);\n    const last = tabs.length - 1;\n    let nextIndex: number;\n    switch (move) {\n      case \"first\":\n        nextIndex = 0;\n        break;\n      case \"last\":\n        nextIndex = last;\n        break;\n      case \"next\":\n        nextIndex = index >= last ? (loop ? 0 : last) : index + 1;\n        break;\n      case \"prev\":\n        nextIndex = index <= 0 ? (loop ? last : 0) : index - 1;\n        break;\n    }\n    const next = tabs[nextIndex];\n    if (next !== undefined && next !== target) focusTab(next);\n  };\n\n  // With no selected tab (value null or matching no Tab) no Tab has tabindex=0, so the list\n  // itself is the tab stop and hands focus to the first enabled tab (design section 8). Only when\n  // focus arrives from outside the list: Shift+Tab from a tab inside would otherwise bounce\n  // straight back. The redirect never selects: the Tab only dispatches on focus that moves\n  // between tabs.\n  const onFocus = (event: FocusEvent<HTMLElement>) => {\n    const list = event.currentTarget;\n    if (event.target !== list || !listIsTabStop) return;\n    const from = event.relatedTarget;\n    if (from instanceof Node && list.contains(from)) return;\n    const tabs = tabsOf(list);\n    const first = tabs.find((tab) => tab.getAttribute(\"aria-disabled\") !== \"true\") ?? tabs[0];\n    if (first !== undefined) focusTab(first);\n  };\n\n  const focusgroup = experimental_focusgroup\n    ? // `nomemory` + `focusgroupstart` on the selected Tab: Tab always enters on the selected tab\n      // (APG), not on the last focused one, which differs in manual activation.\n      `tablist ${orientation === \"vertical\" ? \"block\" : \"inline\"} ${loop ? \"wrap\" : \"nowrap\"} nomemory`\n    : undefined;\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, TabsListState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"tablist\",\n      \"aria-orientation\": orientation,\n      \"data-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      tabIndex: listIsTabStop ? 0 : undefined,\n      // Owned only while the flag is on; otherwise the key is omitted, not `undefined`, so it is not\n      // owned (conventions 1.2).\n      ...(focusgroup !== undefined && { focusgroup }),\n      onKeyDown,\n      onFocus,\n    },\n    ref: listRef,\n  });\n\n  return <TabsListContext value={listContext}>{element}</TabsListContext>;\n}\n\nTabsList.displayName = \"TabsList\";\n"],"mappings":"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"}

package/dist/tabs/tabs-panel.d.mts

@@ -0,0 +1,50 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { TabsOrientation } from "./tabs-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode, ViewTransitionClass } from "react";
+//#region src/tabs/tabs-panel.d.ts
+export interface TabsPanelState {
+  readonly value: string;
+  /** Committed: true only once the action has resolved and the render has committed. */
+  readonly selected: boolean;
+  readonly orientation: TabsOrientation;
+}
+export interface TabsPanelProps extends Omit<ComponentPropsWithRef<"div">, "id" | "hidden" | "className" | "style" | "children"> {
+  /** The tab value this panel belongs to. */
+  value: string;
+  /**
+   * What happens while this panel is not the committed selection.
+   * - `false` (default): the panel is not rendered.
+   * - `true`: rendered inside `<Activity mode="hidden">`: DOM and state are preserved, effects
+   *   are stopped, content is pre-rendered at low priority. Not part of server-rendered HTML.
+   * - `"until-found"`: rendered with `hidden="until-found"`: DOM, state and effects stay live,
+   *   the content is in server-rendered HTML, and find-in-page or a text fragment selects the
+   *   tab (`details.reason === "platform"`).
+   */
+  keepMounted?: boolean | "until-found";
+  /**
+   * Forwarded to the Panel's `<ViewTransition default>`. Default: no boundary.
+   *
+   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between
+   * `undefined` and a value remounts the element. Any value, `"none"` included, makes a mount or
+   * `<Activity>` reveal of this part inside a transition start a document view transition: the
+   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, TabsPanelState>;
+  style?: StateValue<CSSProperties | undefined, TabsPanelState>;
+  children?: StateValue<ReactNode, TabsPanelState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, TabsPanelState>;
+}
+/**
+ * A `div[role=tabpanel]`. Renders the **committed** selection, so a newly selected panel that
+ * suspends keeps the current panel on screen while the Root shows `data-pending`.
+ *
+ * Owned keys (conventions 1.2): `role`, `id`, `aria-labelledby` (token-merged), `data-selected`,
+ * `hidden`.
+ */
+export declare function TabsPanel(props: TabsPanelProps): import("react").JSX.Element | null;
+export declare namespace TabsPanel {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=tabs-panel.d.mts.map

package/dist/tabs/tabs-panel.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-panel.d.mts","names":[],"sources":["../../src/tabs/tabs-panel.tsx"],"mappings":";;;;iBAYiB;WACN;;WAEA;WACA,aAAa;;iBAGP,uBAAuB,KACtC;;EAIA;;;;;;;;;;EAUA;;;;;;;;;EASA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;wBAUpC,UAAU,OAAO,iCAAc,IAAA;yBAA/B"}

package/dist/tabs/tabs-panel.mjs

@@ -0,0 +1,81 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useTabsContext } from "./tabs-context.mjs";
+import { panelId, tabId } from "./tabs-ids.mjs";
+import { useUntilFound } from "../internal/use-until-found.mjs";
+import { Activity } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/tabs/tabs-panel.tsx
+/**
+* A `div[role=tabpanel]`. Renders the **committed** selection, so a newly selected panel that
+* suspends keeps the current panel on screen while the Root shows `data-pending`.
+*
+* Owned keys (conventions 1.2): `role`, `id`, `aria-labelledby` (token-merged), `data-selected`,
+* `hidden`.
+*/
+function TabsPanel(props) {
+	const ctx = useTabsContext("Tabs.Panel");
+	const { value, keepMounted = false } = props;
+	const selected = ctx.committed === value;
+	if (keepMounted === false) return selected ? /* @__PURE__ */ jsx(PanelElement, {
+		...props,
+		ctx,
+		selected: true,
+		untilFound: false
+	}) : null;
+	if (keepMounted === true) return /* @__PURE__ */ jsx(Activity, {
+		mode: selected ? "visible" : "hidden",
+		children: /* @__PURE__ */ jsx(PanelElement, {
+			...props,
+			ctx,
+			selected,
+			untilFound: false
+		})
+	});
+	return /* @__PURE__ */ jsx(PanelElement, {
+		...props,
+		ctx,
+		selected,
+		untilFound: true
+	});
+}
+TabsPanel.displayName = "TabsPanel";
+/** Split out so that an unrendered panel resolves none of its function props. */
+function PanelElement({ ctx, selected, untilFound, value, keepMounted: _keepMounted, transition, className, style, children, render, ...rest }) {
+	const untilFoundRef = useUntilFound({
+		active: untilFound && !selected && ctx.optimistic !== value,
+		onMatch: (event) => ctx.select(value, event, "platform")
+	});
+	const state = {
+		value,
+		selected,
+		orientation: ctx.orientation
+	};
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: {
+			tabIndex: 0,
+			...rest
+		},
+		libraryProps: {
+			role: "tabpanel",
+			id: panelId(ctx.rootId, value),
+			"aria-labelledby": tabId(ctx.rootId, value),
+			"data-selected": dataAttr(selected),
+			hidden: untilFound ? !selected : void 0
+		},
+		ref: untilFound ? untilFoundRef : void 0
+	});
+	return useTransitionBoundary("Tabs.Panel", transition, element);
+}
+//#endregion
+export { TabsPanel };
+
+//# sourceMappingURL=tabs-panel.mjs.map

package/dist/tabs/tabs-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-panel.mjs","names":[],"sources":["../../src/tabs/tabs-panel.tsx"],"sourcesContent":["\"use client\";\nimport { Activity } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode, ViewTransitionClass } from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useUntilFound } from \"../internal/use-until-found.js\";\nimport { useTabsContext } from \"./tabs-context.js\";\nimport type { TabsContextValue, TabsOrientation } from \"./tabs-context.js\";\nimport { panelId, tabId } from \"./tabs-ids.js\";\n\nexport interface TabsPanelState {\n  readonly value: string;\n  /** Committed: true only once the action has resolved and the render has committed. */\n  readonly selected: boolean;\n  readonly orientation: TabsOrientation;\n}\n\nexport interface TabsPanelProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"id\" | \"hidden\" | \"className\" | \"style\" | \"children\"\n> {\n  /** The tab value this panel belongs to. */\n  value: string;\n  /**\n   * What happens while this panel is not the committed selection.\n   * - `false` (default): the panel is not rendered.\n   * - `true`: rendered inside `<Activity mode=\"hidden\">`: DOM and state are preserved, effects\n   *   are stopped, content is pre-rendered at low priority. Not part of server-rendered HTML.\n   * - `\"until-found\"`: rendered with `hidden=\"until-found\"`: DOM, state and effects stay live,\n   *   the content is in server-rendered HTML, and find-in-page or a text fragment selects the\n   *   tab (`details.reason === \"platform\"`).\n   */\n  keepMounted?: boolean | \"until-found\";\n  /**\n   * Forwarded to the Panel's `<ViewTransition default>`. Default: no boundary.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, TabsPanelState>;\n  style?: StateValue<CSSProperties | undefined, TabsPanelState>;\n  children?: StateValue<ReactNode, TabsPanelState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TabsPanelState>;\n}\n\n/**\n * A `div[role=tabpanel]`. Renders the **committed** selection, so a newly selected panel that\n * suspends keeps the current panel on screen while the Root shows `data-pending`.\n *\n * Owned keys (conventions 1.2): `role`, `id`, `aria-labelledby` (token-merged), `data-selected`,\n * `hidden`.\n */\nexport function TabsPanel(props: TabsPanelProps) {\n  const ctx = useTabsContext(\"Tabs.Panel\");\n  const { value, keepMounted = false } = props;\n  const selected = ctx.committed === value;\n\n  if (keepMounted === false) {\n    return selected ? <PanelElement {...props} ctx={ctx} selected untilFound={false} /> : null;\n  }\n  if (keepMounted === true) {\n    // The mode only changes when `committed` does, i.e. inside the Root's transition, so the\n    // nested `<ViewTransition>` gets enter / exit (conventions 5.5).\n    return (\n      <Activity mode={selected ? \"visible\" : \"hidden\"}>\n        <PanelElement {...props} ctx={ctx} selected={selected} untilFound={false} />\n      </Activity>\n    );\n  }\n  return <PanelElement {...props} ctx={ctx} selected={selected} untilFound />;\n}\n\nTabsPanel.displayName = \"TabsPanel\";\n\ninterface PanelElementProps extends TabsPanelProps {\n  ctx: TabsContextValue;\n  selected: boolean;\n  untilFound: boolean;\n}\n\n/** Split out so that an unrendered panel resolves none of its function props. */\nfunction PanelElement({\n  ctx,\n  selected,\n  untilFound,\n  value,\n  keepMounted: _keepMounted,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: PanelElementProps) {\n  const untilFoundRef = useUntilFound<HTMLDivElement>({\n    // Not while this panel is the optimistic target: the browser has revealed it (or the user\n    // selected its tab) and the action is pending; re-hiding it would undo the reveal. A\n    // rejection or veto reverts the optimistic value, which re-activates the hook.\n    active: untilFound && !selected && ctx.optimistic !== value,\n    onMatch: (event) => ctx.select(value, event, \"platform\"),\n  });\n\n  const state: TabsPanelState = { value, selected, orientation: ctx.orientation };\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, TabsPanelState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    // `tabIndex` defaults to 0 (APG: the panel is a tab stop) and passes through.\n    props: { tabIndex: 0, ...rest },\n    libraryProps: {\n      role: \"tabpanel\",\n      id: panelId(ctx.rootId, value),\n      \"aria-labelledby\": tabId(ctx.rootId, value),\n      \"data-selected\": dataAttr(selected),\n      // Boolean form for SSR; `useUntilFound` upgrades it to \"until-found\" (conventions 7.4).\n      hidden: untilFound ? !selected : undefined,\n    },\n    ref: untilFound ? untilFoundRef : undefined,\n  });\n\n  return useTransitionBoundary(\"Tabs.Panel\", transition, element);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyDA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,MAAM,eAAe,YAAY;CACvC,MAAM,EAAE,OAAO,cAAc,UAAU;CACvC,MAAM,WAAW,IAAI,cAAc;CAEnC,IAAI,gBAAgB,OAClB,OAAO,WAAW,oBAAC,cAAD;EAAc,GAAI;EAAY;EAAK,UAAA;EAAS,YAAY;CAAQ,CAAA,IAAI;CAExF,IAAI,gBAAgB,MAGlB,OACE,oBAAC,UAAD;EAAU,MAAM,WAAW,YAAY;EACrC,UAAA,oBAAC,cAAD;GAAc,GAAI;GAAY;GAAe;GAAU,YAAY;EAAQ,CAAA;CACnE,CAAA;CAGd,OAAO,oBAAC,cAAD;EAAc,GAAI;EAAY;EAAe;EAAU,YAAA;CAAY,CAAA;AAC5E;AAEA,UAAU,cAAc;;AASxB,SAAS,aAAa,EACpB,KACA,UACA,YACA,OACA,aAAa,cACb,YACA,WACA,OACA,UACA,QACA,GAAG,QACiB;CACpB,MAAM,gBAAgB,cAA8B;EAIlD,QAAQ,cAAc,CAAC,YAAY,IAAI,eAAe;EACtD,UAAU,UAAU,IAAI,OAAO,OAAO,OAAO,UAAU;CACzD,CAAC;CAED,MAAM,QAAwB;EAAE;EAAO;EAAU,aAAa,IAAI;CAAY;CAE9E,MAAM,UAAU,UAAwD;EACtE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EAEA,OAAO;GAAE,UAAU;GAAG,GAAG;EAAK;EAC9B,cAAc;GACZ,MAAM;GACN,IAAI,QAAQ,IAAI,QAAQ,KAAK;GAC7B,mBAAmB,MAAM,IAAI,QAAQ,KAAK;GAC1C,iBAAiB,SAAS,QAAQ;GAElC,QAAQ,aAAa,CAAC,WAAW,KAAA;EACnC;EACA,KAAK,aAAa,gBAAgB,KAAA;CACpC,CAAC;CAED,OAAO,sBAAsB,cAAc,YAAY,OAAO;AAChE"}

package/dist/tabs/tabs-root.d.mts

@@ -0,0 +1,64 @@
+import { ActionDetails, ChangeAction, RenderProp, StateValue } from "../internal/types.mjs";
+import { TabsActivationMode, TabsChangeReason, TabsOrientation } from "./tabs-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/tabs/tabs-root.d.ts
+/** Details passed as the second argument of `valueChangeAction`. */
+export interface TabsValueChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user selected the tab (click, Enter/Space, or focus in automatic mode).
+   * `"platform"`: the browser revealed a `keepMounted="until-found"` panel through find-in-page or a
+   * text fragment (`details.event` is the `beforematch` event).
+   */
+  readonly reason: TabsChangeReason;
+}
+export interface TabsRootState {
+  /** Optimistic selected value, or `null`. Content rendered from it must not suspend. */
+  readonly value: string | null;
+  /** An action dispatched through this Tabs is in flight. */
+  readonly pending: boolean;
+  readonly orientation: TabsOrientation;
+  readonly disabled: boolean;
+}
+export interface TabsRootProps extends Omit<ComponentPropsWithRef<"div">, "className" | "style" | "children" | "defaultValue"> {
+  /** Controlled selected value. `null` selects nothing; `undefined` means uncontrolled. */
+  value?: string | null;
+  /** Initial value in uncontrolled mode. Defaults to `null` (no panel shown). */
+  defaultValue?: string | null;
+  /**
+   * Runs inside the Root's transition whenever the user selects a tab. May be sync or async;
+   * rejections reach the nearest Error Boundary and roll the selection back.
+   *
+   * With `activationMode="automatic"` every arrow key press calls it; prefer `"manual"` when the
+   * action awaits a server round trip. A `setState` placed after your own `await` is not a
+   * Transition update; wrap it in `startTransition` (React limitation).
+   */
+  valueChangeAction?: ChangeAction<string, TabsValueChangeDetails>;
+  /** Layout and arrow-key axis. Default `"horizontal"`. */
+  orientation?: TabsOrientation;
+  /**
+   * `"automatic"`: selection follows focus. `"manual"`: Enter, Space or click selects.
+   * Default `"automatic"`.
+   */
+  activationMode?: TabsActivationMode;
+  /** Whether arrow keys wrap from the last tab to the first. Default `true`. */
+  loop?: boolean;
+  /** Disables every Tab (focusable, never dispatches). */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, TabsRootState>;
+  style?: StateValue<CSSProperties | undefined, TabsRootState>;
+  children?: StateValue<ReactNode, TabsRootState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, TabsRootState>;
+}
+/**
+ * Owns the Tabs state (`value`), the transition, the ids and the context. Renders a `div` with
+ * `data-pending` while a selection is in flight (including a suspending panel's wait).
+ *
+ * Owned keys (conventions 1.2): `data-pending`, `data-orientation`, `data-disabled`.
+ */
+export declare function TabsRoot({ value, defaultValue, valueChangeAction, orientation, activationMode, loop, disabled, className, style, children, render, ...rest }: TabsRootProps): import("react").JSX.Element;
+export declare namespace TabsRoot {
+  var displayName: string;
+}
+//#endregion
+export type { TabsActivationMode, TabsOrientation };
+//# sourceMappingURL=tabs-root.d.mts.map

package/dist/tabs/tabs-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-root.d.mts","names":[],"sources":["../../src/tabs/tabs-root.tsx"],"mappings":";;;;;iBAsBiB,+BAA+B;;;;;;WAMrC,QAAQ;;iBAGF;;WAEN;;WAEA;WACA,aAAa;WACb;;iBAGM,sBAAsB,KACrC;;EAIA;;EAEA;;;;;;;;;EASA,oBAAoB,qBAAqB;;EAEzC,cAAc;;;;;EAKd,iBAAiB;;EAEjB;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;wBAkBpC,WACd,OACA,cACA,mBACA,aACA,gBACA,MACA,UACA,WACA,OACA,UACA,WACG,QACF,gCAAa,IAAA;yBAbA"}