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

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"}

package/dist/tabs/tabs-root.mjs

@@ -0,0 +1,90 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { TabsContext } from "./tabs-context.mjs";
+import { tabId } from "./tabs-ids.mjs";
+import { useId, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/tabs/tabs-root.tsx
+/** Looks up an element by id in the tree that contains `node` (document or shadow root). */
+function findById(node, id) {
+	const root = node?.getRootNode() ?? (typeof document === "undefined" ? null : document);
+	if (root !== null && "getElementById" in root) return root.getElementById(id);
+	return null;
+}
+/**
+* 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`.
+*/
+function TabsRoot({ value, defaultValue, valueChangeAction, orientation = "horizontal", activationMode = "automatic", loop = true, disabled = false, className, style, children, render, ...rest }) {
+	const rootId = useId();
+	const rootRef = useRef(null);
+	const { committed, optimistic, pending, dispatch } = useControllableAction({
+		controlled: value,
+		defaultValue,
+		initialValue: null,
+		action: valueChangeAction === void 0 ? void 0 : (next, details) => valueChangeAction(next, details),
+		transitionTypes: (next, prev) => {
+			if (next === null || prev === null || next === prev) return transitionTypes("tabs");
+			const prevTab = findById(rootRef.current, tabId(rootId, prev));
+			const nextTab = findById(rootRef.current, tabId(rootId, next));
+			if (prevTab === null || nextTab === null) return transitionTypes("tabs");
+			const following = prevTab.compareDocumentPosition(nextTab) & Node.DOCUMENT_POSITION_FOLLOWING;
+			return transitionTypes("tabs", following ? "next" : "prev");
+		},
+		warn: {
+			component: "Tabs.Root",
+			prop: "value"
+		}
+	});
+	useDevWarning(value === void 0 && defaultValue === void 0, "Tabs.Root: neither `value` nor `defaultValue` was passed, so no tab is selected and no panel is shown. Pass `defaultValue`, or `defaultValue={null}` to start with no selection.");
+	const context = {
+		rootId,
+		committed,
+		optimistic,
+		pending,
+		orientation,
+		activationMode,
+		loop,
+		disabled,
+		select: (next, event, reason) => {
+			if (next === optimistic) return;
+			dispatch(next, createActionDetails(event, { reason }));
+		}
+	};
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state: {
+			value: optimistic,
+			pending,
+			orientation,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			"data-pending": dataAttr(pending),
+			"data-orientation": orientation,
+			"data-disabled": dataAttr(disabled)
+		},
+		ref: rootRef
+	});
+	return /* @__PURE__ */ jsx(TabsContext, {
+		value: context,
+		children: element
+	});
+}
+TabsRoot.displayName = "TabsRoot";
+//#endregion
+export { TabsRoot };
+
+//# sourceMappingURL=tabs-root.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-root.mjs","names":[],"sources":["../../src/tabs/tabs-root.tsx"],"sourcesContent":["\"use client\";\nimport { useId, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { TabsContext } from \"./tabs-context.js\";\nimport type {\n  TabsActivationMode,\n  TabsChangeReason,\n  TabsContextValue,\n  TabsOrientation,\n} from \"./tabs-context.js\";\nimport { tabId } from \"./tabs-ids.js\";\n\nexport type { TabsActivationMode, TabsOrientation } from \"./tabs-context.js\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface TabsValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user selected the tab (click, Enter/Space, or focus in automatic mode).\n   * `\"platform\"`: the browser revealed a `keepMounted=\"until-found\"` panel through find-in-page or a\n   * text fragment (`details.event` is the `beforematch` event).\n   */\n  readonly reason: TabsChangeReason;\n}\n\nexport interface TabsRootState {\n  /** Optimistic selected value, or `null`. Content rendered from it must not suspend. */\n  readonly value: string | null;\n  /** An action dispatched through this Tabs is in flight. */\n  readonly pending: boolean;\n  readonly orientation: TabsOrientation;\n  readonly disabled: boolean;\n}\n\nexport interface TabsRootProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"className\" | \"style\" | \"children\" | \"defaultValue\"\n> {\n  /** Controlled selected value. `null` selects nothing; `undefined` means uncontrolled. */\n  value?: string | null;\n  /** Initial value in uncontrolled mode. Defaults to `null` (no panel shown). */\n  defaultValue?: string | null;\n  /**\n   * Runs inside the Root's transition whenever the user selects a tab. May be sync or async;\n   * rejections reach the nearest Error Boundary and roll the selection back.\n   *\n   * With `activationMode=\"automatic\"` every arrow key press calls it; prefer `\"manual\"` when the\n   * action awaits a server round trip. A `setState` placed after your own `await` is not a\n   * Transition update; wrap it in `startTransition` (React limitation).\n   */\n  valueChangeAction?: ChangeAction<string, TabsValueChangeDetails>;\n  /** Layout and arrow-key axis. Default `\"horizontal\"`. */\n  orientation?: TabsOrientation;\n  /**\n   * `\"automatic\"`: selection follows focus. `\"manual\"`: Enter, Space or click selects.\n   * Default `\"automatic\"`.\n   */\n  activationMode?: TabsActivationMode;\n  /** Whether arrow keys wrap from the last tab to the first. Default `true`. */\n  loop?: boolean;\n  /** Disables every Tab (focusable, never dispatches). */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, TabsRootState>;\n  style?: StateValue<CSSProperties | undefined, TabsRootState>;\n  children?: StateValue<ReactNode, TabsRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TabsRootState>;\n}\n\n/** Looks up an element by id in the tree that contains `node` (document or shadow root). */\nfunction findById(node: Node | null, id: string): Element | null {\n  const root = node?.getRootNode() ?? (typeof document === \"undefined\" ? null : document);\n  if (root !== null && \"getElementById\" in root) {\n    return (root as Document | ShadowRoot).getElementById(id);\n  }\n  return null;\n}\n\n/**\n * Owns the Tabs state (`value`), the transition, the ids and the context. Renders a `div` with\n * `data-pending` while a selection is in flight (including a suspending panel's wait).\n *\n * Owned keys (conventions 1.2): `data-pending`, `data-orientation`, `data-disabled`.\n */\nexport function TabsRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  orientation = \"horizontal\",\n  activationMode = \"automatic\",\n  loop = true,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsRootProps) {\n  const rootId = useId();\n  const rootRef = useRef<HTMLElement | null>(null);\n\n  const { committed, optimistic, pending, dispatch } = useControllableAction<\n    string | null,\n    TabsValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    // Only ever dispatched with a string: the Tabs UI cannot deselect.\n    action:\n      valueChangeAction === undefined\n        ? undefined\n        : (next, details) => valueChangeAction(next as string, details),\n    transitionTypes: (next, prev) => {\n      // Direction is relative to the committed tab (design 10.2), by DOM order of the two tabs.\n      if (next === null || prev === null || next === prev) return transitionTypes(\"tabs\");\n      const prevTab = findById(rootRef.current, tabId(rootId, prev));\n      const nextTab = findById(rootRef.current, tabId(rootId, next));\n      if (prevTab === null || nextTab === null) return transitionTypes(\"tabs\");\n      const following = prevTab.compareDocumentPosition(nextTab) & Node.DOCUMENT_POSITION_FOLLOWING;\n      return transitionTypes(\"tabs\", following ? \"next\" : \"prev\");\n    },\n    warn: { component: \"Tabs.Root\", prop: \"value\" },\n  });\n  // `null` is a legitimate default (no panel), but forgetting both props is the likelier cause\n  // of an empty Tabs (design open question 2, product owner decision).\n  useDevWarning(\n    value === undefined && defaultValue === undefined,\n    \"Tabs.Root: neither `value` nor `defaultValue` was passed, so no tab is selected and no \" +\n      \"panel is shown. Pass `defaultValue`, or `defaultValue={null}` to start with no selection.\",\n  );\n\n  const context: TabsContextValue = {\n    rootId,\n    committed,\n    optimistic,\n    pending,\n    orientation,\n    activationMode,\n    loop,\n    disabled,\n    select: (next, event, reason) => {\n      // No-op rule against the optimistic value (conventions 2.3 item 7, design section 9.4).\n      if (next === optimistic) return;\n      dispatch(next, createActionDetails(event, { reason }));\n    },\n  };\n\n  const state: TabsRootState = { value: optimistic, pending, orientation, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, TabsRootState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      \"data-pending\": dataAttr(pending),\n      \"data-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n    },\n    ref: rootRef,\n  });\n\n  return <TabsContext value={context}>{element}</TabsContext>;\n}\n\nTabsRoot.displayName = \"TabsRoot\";\n"],"mappings":";;;;;;;;;;;;;AA2EA,SAAS,SAAS,MAAmB,IAA4B;CAC/D,MAAM,OAAO,MAAM,YAAY,MAAM,OAAO,aAAa,cAAc,OAAO;CAC9E,IAAI,SAAS,QAAQ,oBAAoB,MACvC,OAAQ,KAA+B,eAAe,EAAE;CAE1D,OAAO;AACT;;;;;;;AAQA,SAAgB,SAAS,EACvB,OACA,cACA,mBACA,cAAc,cACd,iBAAiB,aACjB,OAAO,MACP,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACa;CAChB,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,OAA2B,IAAI;CAE/C,MAAM,EAAE,WAAW,YAAY,SAAS,aAAa,sBAGnD;EACA,YAAY;EACZ;EACA,cAAc;EAEd,QACE,sBAAsB,KAAA,IAClB,KAAA,KACC,MAAM,YAAY,kBAAkB,MAAgB,OAAO;EAClE,kBAAkB,MAAM,SAAS;GAE/B,IAAI,SAAS,QAAQ,SAAS,QAAQ,SAAS,MAAM,OAAO,gBAAgB,MAAM;GAClF,MAAM,UAAU,SAAS,QAAQ,SAAS,MAAM,QAAQ,IAAI,CAAC;GAC7D,MAAM,UAAU,SAAS,QAAQ,SAAS,MAAM,QAAQ,IAAI,CAAC;GAC7D,IAAI,YAAY,QAAQ,YAAY,MAAM,OAAO,gBAAgB,MAAM;GACvE,MAAM,YAAY,QAAQ,wBAAwB,OAAO,IAAI,KAAK;GAClE,OAAO,gBAAgB,QAAQ,YAAY,SAAS,MAAM;EAC5D;EACA,MAAM;GAAE,WAAW;GAAa,MAAM;EAAQ;CAChD,CAAC;CAGD,cACE,UAAU,KAAA,KAAa,iBAAiB,KAAA,GACxC,kLAEF;CAEA,MAAM,UAA4B;EAChC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,SAAS,MAAM,OAAO,WAAW;GAE/B,IAAI,SAAS,YAAY;GACzB,SAAS,MAAM,oBAAoB,OAAO,EAAE,OAAO,CAAC,CAAC;EACvD;CACF;CAIA,MAAM,UAAU,UAAuD;EACrE,gBAAgB;EAChB;EACA,OAAA;GAL6B,OAAO;GAAY;GAAS;GAAa;EAKlE;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,gBAAgB,SAAS,OAAO;GAChC,oBAAoB;GACpB,iBAAiB,SAAS,QAAQ;EACpC;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,aAAD;EAAa,OAAO;EAAU,UAAA;CAAqB,CAAA;AAC5D;AAEA,SAAS,cAAc"}

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

@@ -0,0 +1,49 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { TabsOrientation } from "./tabs-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode, ViewTransitionClass } from "react";
+//#region src/tabs/tabs-tab.d.ts
+export interface TabsTabState {
+  readonly value: string;
+  /** Optimistic: true as soon as the user selects this tab, before the action settles. */
+  readonly selected: boolean;
+  /** The Root is pending and this tab is the optimistic target. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+  readonly orientation: TabsOrientation;
+}
+export interface TabsTabProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "onKeyDown" | "onFocus" | "id" | "value" | "className" | "style" | "children"> {
+  /** The value this tab selects. Must be unique within the Root. */
+  value: string;
+  /** Focusable but inert: `aria-disabled="true"`, never dispatches. */
+  disabled?: boolean;
+  /**
+   * Forwarded to the Tab's `<ViewTransition default>`. Default: no boundary. Fires only on the commit
+   * that settles the action (or rolls it back), never on the optimistic selection; animate the
+   * selection itself with a CSS `transition` on `[data-selected]`.
+   *
+   * 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, TabsTabState>;
+  style?: StateValue<CSSProperties | undefined, TabsTabState>;
+  /** Rendered from optimistic state; must not suspend. */
+  children?: StateValue<ReactNode, TabsTabState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, TabsTabState>;
+}
+/**
+ * A `button[role=tab]`. Renders the optimistic selection (`aria-selected`, `data-selected`,
+ * roving `tabindex`) and carries `anchor-name` for the Indicator.
+ *
+ * Owned keys (conventions 1.2): `role`, `id`, `aria-selected`, `aria-controls` (token-merged),
+ * `aria-disabled`, `tabIndex`, `data-selected`, `data-pending`, `data-disabled`,
+ * `data-orientation`, `onClick`, `onKeyDown`, `onFocus`.
+ */
+export declare function TabsTab({ value, disabled: disabledProp, transition, className, style, children, render, ...rest }: TabsTabProps): ReactNode;
+export declare namespace TabsTab {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=tabs-tab.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab.d.mts","names":[],"sources":["../../src/tabs/tabs-tab.tsx"],"mappings":";;;;iBAkBiB;WACN;;WAEA;;WAEA;WACA;WACA,aAAa;;iBAGP,qBAAqB,KACpC;;EAIA;;EAEA;;;;;;;;;;;EAWA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;wBA2BvC,UACd,OACA,UAAU,cACV,YACA,WACA,OACA,UACA,WACG,QACF,eAAY;yBATC"}

package/dist/tabs/tabs-tab.mjs

@@ -0,0 +1,86 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton, resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { useTabsContext } from "./tabs-context.mjs";
+import { anchorName, panelId, tabId } from "./tabs-ids.mjs";
+//#region src/tabs/tabs-tab.tsx
+function isActivationKey(event) {
+	return (event.key === "Enter" || event.key === " ") && !event.altKey && !event.ctrlKey && !event.metaKey;
+}
+/** Focus came from another element inside the tab's own tablist (not from the list itself). */
+function movedWithinList(event) {
+	const list = event.currentTarget.closest("[role=\"tablist\"]");
+	const from = event.relatedTarget;
+	return list !== null && from instanceof Node && from !== list && list.contains(from);
+}
+/**
+* A `button[role=tab]`. Renders the optimistic selection (`aria-selected`, `data-selected`,
+* roving `tabindex`) and carries `anchor-name` for the Indicator.
+*
+* Owned keys (conventions 1.2): `role`, `id`, `aria-selected`, `aria-controls` (token-merged),
+* `aria-disabled`, `tabIndex`, `data-selected`, `data-pending`, `data-disabled`,
+* `data-orientation`, `onClick`, `onKeyDown`, `onFocus`.
+*/
+function TabsTab({ value, disabled: disabledProp = false, transition, className, style, children, render, ...rest }) {
+	const ctx = useTabsContext("Tabs.Tab");
+	const selected = ctx.optimistic === value;
+	const pending = ctx.pending && selected;
+	const disabled = ctx.disabled || disabledProp;
+	const anchor = anchorName(ctx.rootId, value);
+	const state = {
+		value,
+		selected,
+		pending,
+		disabled,
+		orientation: ctx.orientation
+	};
+	const element = useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style: (s) => ({
+			anchorName: anchor,
+			...resolveStateValue(style, s)
+		}),
+		children,
+		props: rendersButton(render) ? {
+			...rest,
+			type: "button"
+		} : rest,
+		libraryProps: {
+			role: "tab",
+			id: tabId(ctx.rootId, value),
+			"aria-selected": selected,
+			"aria-controls": panelId(ctx.rootId, value),
+			"aria-disabled": disabled ? true : void 0,
+			tabIndex: selected ? 0 : -1,
+			"data-selected": dataAttr(selected),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			"data-orientation": ctx.orientation,
+			onClick: (event) => {
+				if (disabled) return;
+				ctx.select(value, event.nativeEvent, "activate");
+			},
+			onKeyDown: (event) => {
+				if (!isActivationKey(event)) return;
+				event.preventDefault();
+				if (disabled) return;
+				ctx.select(value, event.nativeEvent, "activate");
+			},
+			onFocus: (event) => {
+				if (ctx.activationMode !== "automatic" || disabled || selected) return;
+				if (!movedWithinList(event)) return;
+				ctx.select(value, event.nativeEvent, "activate");
+			}
+		}
+	});
+	return useTransitionBoundary("Tabs.Tab", transition, element);
+}
+TabsTab.displayName = "TabsTab";
+//#endregion
+export { TabsTab };
+
+//# sourceMappingURL=tabs-tab.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab.mjs","names":[],"sources":["../../src/tabs/tabs-tab.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} 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 { rendersButton, resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport { useTabsContext } from \"./tabs-context.js\";\nimport type { TabsOrientation } from \"./tabs-context.js\";\nimport { anchorName, panelId, tabId } from \"./tabs-ids.js\";\n\nexport interface TabsTabState {\n  readonly value: string;\n  /** Optimistic: true as soon as the user selects this tab, before the action settles. */\n  readonly selected: boolean;\n  /** The Root is pending and this tab is the optimistic target. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n  readonly orientation: TabsOrientation;\n}\n\nexport interface TabsTabProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"onKeyDown\" | \"onFocus\" | \"id\" | \"value\" | \"className\" | \"style\" | \"children\"\n> {\n  /** The value this tab selects. Must be unique within the Root. */\n  value: string;\n  /** Focusable but inert: `aria-disabled=\"true\"`, never dispatches. */\n  disabled?: boolean;\n  /**\n   * Forwarded to the Tab's `<ViewTransition default>`. Default: no boundary. Fires only on the commit\n   * that settles the action (or rolls it back), never on the optimistic selection; animate the\n   * selection itself with a CSS `transition` on `[data-selected]`.\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, TabsTabState>;\n  style?: StateValue<CSSProperties | undefined, TabsTabState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, TabsTabState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, TabsTabState>;\n}\n\nfunction isActivationKey(event: KeyboardEvent): boolean {\n  return (\n    (event.key === \"Enter\" || event.key === \" \") &&\n    !event.altKey &&\n    !event.ctrlKey &&\n    !event.metaKey\n  );\n}\n\n/** Focus came from another element inside the tab's own tablist (not from the list itself). */\nfunction movedWithinList(event: FocusEvent<HTMLElement>): boolean {\n  const list = event.currentTarget.closest('[role=\"tablist\"]');\n  const from = event.relatedTarget;\n  return list !== null && from instanceof Node && from !== list && list.contains(from);\n}\n\n/**\n * A `button[role=tab]`. Renders the optimistic selection (`aria-selected`, `data-selected`,\n * roving `tabindex`) and carries `anchor-name` for the Indicator.\n *\n * Owned keys (conventions 1.2): `role`, `id`, `aria-selected`, `aria-controls` (token-merged),\n * `aria-disabled`, `tabIndex`, `data-selected`, `data-pending`, `data-disabled`,\n * `data-orientation`, `onClick`, `onKeyDown`, `onFocus`.\n */\nexport function TabsTab({\n  value,\n  disabled: disabledProp = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsTabProps) {\n  const ctx = useTabsContext(\"Tabs.Tab\");\n  const selected = ctx.optimistic === value;\n  const pending = ctx.pending && selected;\n  const disabled = ctx.disabled || disabledProp;\n  const anchor = anchorName(ctx.rootId, value);\n\n  const state: TabsTabState = {\n    value,\n    selected,\n    pending,\n    disabled,\n    orientation: ctx.orientation,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, TabsTabState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    // `anchor-name` sits under the consumer's style: the consumer wins (design 13.5).\n    style: (s) => ({ anchorName: anchor, ...resolveStateValue(style, s) }),\n    children,\n    // `type=\"button\"` only on a real button (no form submission); an `<a>` must not get it.\n    props: rendersButton(render) ? { ...rest, type: \"button\" } : rest,\n    libraryProps: {\n      role: \"tab\",\n      id: tabId(ctx.rootId, value),\n      \"aria-selected\": selected,\n      \"aria-controls\": panelId(ctx.rootId, value),\n      \"aria-disabled\": disabled ? true : undefined,\n      tabIndex: selected ? 0 : -1,\n      \"data-selected\": dataAttr(selected),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": ctx.orientation,\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        ctx.select(value, event.nativeEvent, \"activate\");\n      },\n      // Enter and Space are handled on keydown so a `render`ed non-button element (a link)\n      // behaves the same; `preventDefault` also stops the native click / navigation.\n      onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n        if (!isActivationKey(event)) return;\n        event.preventDefault();\n        if (disabled) return;\n        ctx.select(value, event.nativeEvent, \"activate\");\n      },\n      // Automatic activation is selection-follows-focus (design 4.1), but only for focus that\n      // moves between tabs inside this list (the arrow-key path, the native `focusgroup` path,\n      // programmatic movement). Focus entering from outside never selects: the Tab key, window\n      // re-activation, focus restore, `autoFocus`, and the List's own redirect when no tab is the\n      // tab stop. A click still selects through `onClick`.\n      onFocus: (event: FocusEvent<HTMLButtonElement>) => {\n        if (ctx.activationMode !== \"automatic\" || disabled || selected) return;\n        if (!movedWithinList(event)) return;\n        ctx.select(value, event.nativeEvent, \"activate\");\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Tabs.Tab\", transition, element);\n}\n\nTabsTab.displayName = \"TabsTab\";\n"],"mappings":";;;;;;;AAsDA,SAAS,gBAAgB,OAA+B;CACtD,QACG,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,CAAC,MAAM,UACP,CAAC,MAAM,WACP,CAAC,MAAM;AAEX;;AAGA,SAAS,gBAAgB,OAAyC;CAChE,MAAM,OAAO,MAAM,cAAc,QAAQ,oBAAkB;CAC3D,MAAM,OAAO,MAAM;CACnB,OAAO,SAAS,QAAQ,gBAAgB,QAAQ,SAAS,QAAQ,KAAK,SAAS,IAAI;AACrF;;;;;;;;;AAUA,SAAgB,QAAQ,EACtB,OACA,UAAU,eAAe,OACzB,YACA,WACA,OACA,UACA,QACA,GAAG,QACY;CACf,MAAM,MAAM,eAAe,UAAU;CACrC,MAAM,WAAW,IAAI,eAAe;CACpC,MAAM,UAAU,IAAI,WAAW;CAC/B,MAAM,WAAW,IAAI,YAAY;CACjC,MAAM,SAAS,WAAW,IAAI,QAAQ,KAAK;CAE3C,MAAM,QAAsB;EAC1B;EACA;EACA;EACA;EACA,aAAa,IAAI;CACnB;CAEA,MAAM,UAAU,UAAyD;EACvE,gBAAgB;EAChB;EACA;EACA;EAEA,QAAQ,OAAO;GAAE,YAAY;GAAQ,GAAG,kBAAkB,OAAO,CAAC;EAAE;EACpE;EAEA,OAAO,cAAc,MAAM,IAAI;GAAE,GAAG;GAAM,MAAM;EAAS,IAAI;EAC7D,cAAc;GACZ,MAAM;GACN,IAAI,MAAM,IAAI,QAAQ,KAAK;GAC3B,iBAAiB;GACjB,iBAAiB,QAAQ,IAAI,QAAQ,KAAK;GAC1C,iBAAiB,WAAW,OAAO,KAAA;GACnC,UAAU,WAAW,IAAI;GACzB,iBAAiB,SAAS,QAAQ;GAClC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,oBAAoB,IAAI;GACxB,UAAU,UAAyC;IACjD,IAAI,UAAU;IACd,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GACjD;GAGA,YAAY,UAA4C;IACtD,IAAI,CAAC,gBAAgB,KAAK,GAAG;IAC7B,MAAM,eAAe;IACrB,IAAI,UAAU;IACd,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GACjD;GAMA,UAAU,UAAyC;IACjD,IAAI,IAAI,mBAAmB,eAAe,YAAY,UAAU;IAChE,IAAI,CAAC,gBAAgB,KAAK,GAAG;IAC7B,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GACjD;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,YAAY,YAAY,OAAO;AAC9D;AAEA,QAAQ,cAAc"}

package/dist/toggle/index.d.mts

@@ -0,0 +1,3 @@
+import "../internal/platform-attributes.mjs";
+import { Toggle, TogglePressedChangeDetails, ToggleProps, ToggleState } from "./toggle.mjs";
+export { Toggle, type TogglePressedChangeDetails, type ToggleProps, type ToggleState };

package/dist/toggle/index.mjs

@@ -0,0 +1 @@
+export { Toggle } from "./toggle.mjs";

package/dist/toggle/toggle.d.mts

@@ -0,0 +1,57 @@
+import { ActionDetails, ChangeAction, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode, ViewTransitionClass } from "react";
+//#region src/toggle/toggle.d.ts
+export interface ToggleState {
+  /** Optimistic pressed state: what the user sees, including an in-flight change. */
+  readonly pressed: boolean;
+  /** An action dispatched by this Toggle is in flight (including the resulting render). */
+  readonly pending: boolean;
+  /** The `disabled` prop. */
+  readonly disabled: boolean;
+}
+/** Details passed as the second argument of `pressedChangeAction`. */
+export interface TogglePressedChangeDetails extends ActionDetails {}
+export interface ToggleProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "type" | "aria-pressed" | "className" | "style" | "children"> {
+  /** Controlled pressed state. `undefined` means uncontrolled. */
+  pressed?: boolean;
+  /** Initial pressed state in uncontrolled mode. Default `false`. */
+  defaultPressed?: boolean;
+  /**
+   * Called with the next pressed state on every user-initiated change. Runs inside the Toggle's
+   * transition; may be sync or async. Rejections reach the nearest Error Boundary.
+   *
+   * A `setState` placed after your own `await` is not a Transition update; wrap it in
+   * `startTransition` (React limitation).
+   */
+  pressedChangeAction?: ChangeAction<boolean, TogglePressedChangeDetails>;
+  /** Renders a native disabled button; never dispatches. Default `false`. */
+  disabled?: boolean;
+  /**
+   * Forwarded as `default` to the Toggle's `<ViewTransition>`. Default: no boundary. Animates the
+   * commit that ends an action (and rollbacks), not the optimistic flip itself; animate the flip
+   * with a CSS `transition` on `[data-pressed]`.
+   *
+   * 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, ToggleState>;
+  style?: StateValue<CSSProperties | undefined, ToggleState>;
+  /** Rendered from optimistic state inside the button; must not suspend. */
+  children?: StateValue<ReactNode, ToggleState>;
+  /** Replace the rendered element (element form) or take over rendering (function form). */
+  render?: RenderProp<ComponentPropsWithRef<"button">, ToggleState>;
+}
+/**
+ * A two-state button (WAI-ARIA "Button" pattern, toggle variant). Renders
+ * `<button type="button" aria-pressed>`; the pressed state flips optimistically and the element
+ * carries `data-pending` while `pressedChangeAction` is in flight.
+ */
+export declare function Toggle({ pressed, defaultPressed, pressedChangeAction, disabled, transition, className, style, children, render, ...rest }: ToggleProps): ReactNode;
+export declare namespace Toggle {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toggle.d.mts.map

package/dist/toggle/toggle.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.mts","names":[],"sources":["../../src/toggle/toggle.tsx"],"mappings":";;;iBAgBiB;;WAEN;;WAEA;;WAEA;;;iBAIM,mCAAmC;iBAKnC,oBAAoB,KACnC;;EAIA;;EAEA;;;;;;;;EAQA,sBAAsB,sBAAsB;;EAE5C;;;;;;;;;;;EAWA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;wBAQvC,SACd,SACA,gBACA,qBACA,UACA,YACA,WACA,OACA,UACA,WACG,QACF,cAAW;yBAXE"}

package/dist/toggle/toggle.mjs

@@ -0,0 +1,59 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { rendersButton, useRender } from "../internal/use-render.mjs";
+//#region src/toggle/toggle.tsx
+/**
+* A two-state button (WAI-ARIA "Button" pattern, toggle variant). Renders
+* `<button type="button" aria-pressed>`; the pressed state flips optimistically and the element
+* carries `data-pending` while `pressedChangeAction` is in flight.
+*/
+function Toggle({ pressed, defaultPressed, pressedChangeAction, disabled = false, transition, className, style, children, render, ...rest }) {
+	const { optimistic, pending, dispatch } = useControllableAction({
+		controlled: pressed,
+		defaultValue: defaultPressed,
+		initialValue: false,
+		action: pressedChangeAction,
+		transitionTypes: (next) => transitionTypes("toggle", next ? "press" : "release"),
+		warn: {
+			component: "Toggle",
+			prop: "pressed"
+		}
+	});
+	const element = useRender({
+		defaultElement: "button",
+		render,
+		state: {
+			pressed: optimistic,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: rendersButton(render) ? {
+			...rest,
+			type: "button"
+		} : rest,
+		libraryProps: {
+			disabled,
+			"aria-pressed": optimistic,
+			"data-pressed": dataAttr(optimistic),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onClick: (event) => {
+				if (disabled) return;
+				dispatch(!optimistic, createActionDetails(event.nativeEvent, {}));
+			}
+		}
+	});
+	return useTransitionBoundary("Toggle", transition, element);
+}
+Toggle.displayName = "Toggle";
+//#endregion
+export { Toggle };
+
+//# sourceMappingURL=toggle.mjs.map

package/dist/toggle/toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.mjs","names":[],"sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\n\nexport interface ToggleState {\n  /** Optimistic pressed state: what the user sees, including an in-flight change. */\n  readonly pressed: boolean;\n  /** An action dispatched by this Toggle is in flight (including the resulting render). */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\n/** Details passed as the second argument of `pressedChangeAction`. */\nexport interface TogglePressedChangeDetails extends ActionDetails {\n  // v0 adds nothing beyond `event`; the interface exists so fields can be added without a\n  // breaking change (e.g. a `reason` if a ToggleGroup ever dispatches on an item's behalf).\n}\n\nexport interface ToggleProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"type\" | \"aria-pressed\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Controlled pressed state. `undefined` means uncontrolled. */\n  pressed?: boolean;\n  /** Initial pressed state in uncontrolled mode. Default `false`. */\n  defaultPressed?: boolean;\n  /**\n   * Called with the next pressed state on every user-initiated change. Runs inside the Toggle's\n   * transition; may be sync or async. Rejections reach the nearest Error Boundary.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation).\n   */\n  pressedChangeAction?: ChangeAction<boolean, TogglePressedChangeDetails>;\n  /** Renders a native disabled button; never dispatches. Default `false`. */\n  disabled?: boolean;\n  /**\n   * Forwarded as `default` to the Toggle's `<ViewTransition>`. Default: no boundary. Animates the\n   * commit that ends an action (and rollbacks), not the optimistic flip itself; animate the flip\n   * with a CSS `transition` on `[data-pressed]`.\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, ToggleState>;\n  style?: StateValue<CSSProperties | undefined, ToggleState>;\n  /** Rendered from optimistic state inside the button; must not suspend. */\n  children?: StateValue<ReactNode, ToggleState>;\n  /** Replace the rendered element (element form) or take over rendering (function form). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToggleState>;\n}\n\n/**\n * A two-state button (WAI-ARIA \"Button\" pattern, toggle variant). Renders\n * `<button type=\"button\" aria-pressed>`; the pressed state flips optimistically and the element\n * carries `data-pending` while `pressedChangeAction` is in flight.\n */\nexport function Toggle({\n  pressed,\n  defaultPressed,\n  pressedChangeAction,\n  disabled = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ToggleProps) {\n  const { optimistic, pending, dispatch } = useControllableAction<\n    boolean,\n    TogglePressedChangeDetails\n  >({\n    controlled: pressed,\n    defaultValue: defaultPressed,\n    initialValue: false,\n    action: pressedChangeAction,\n    transitionTypes: (next) => transitionTypes(\"toggle\", next ? \"press\" : \"release\"),\n    warn: { component: \"Toggle\", prop: \"pressed\" },\n  });\n\n  const state: ToggleState = { pressed: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ToggleState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    // Pass-through layer: a `render` element's own props win over these (its `type` included).\n    // `type=\"button\"` only on a real button; an `<a>` or a component element does not get it.\n    props: rendersButton(render) ? { ...rest, type: \"button\" } : rest,\n    // Library-controlled layer: wins over a `render` element's props.\n    libraryProps: {\n      // Owned so that native disabledness, `data-disabled` and the click guard always agree: a\n      // `render` element cannot re-enable (`disabled={false}`) or disable the button on its own.\n      disabled,\n      \"aria-pressed\": optimistic,\n      \"data-pressed\": dataAttr(optimistic),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        // Native buttons do not fire `click` when disabled; the guard covers `render` elements\n        // that do not honour `disabled`.\n        if (disabled) return;\n        dispatch(!optimistic, createActionDetails(event.nativeEvent, {}));\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Toggle\", transition, element);\n}\n\nToggle.displayName = \"Toggle\";\n"],"mappings":";;;;;;;;;;;;;AAyEA,SAAgB,OAAO,EACrB,SACA,gBACA,qBACA,WAAW,OACX,YACA,WACA,OACA,UACA,QACA,GAAG,QACW;CACd,MAAM,EAAE,YAAY,SAAS,aAAa,sBAGxC;EACA,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,kBAAkB,SAAS,gBAAgB,UAAU,OAAO,UAAU,SAAS;EAC/E,MAAM;GAAE,WAAW;GAAU,MAAM;EAAU;CAC/C,CAAC;CAID,MAAM,UAAU,UAAwD;EACtE,gBAAgB;EAChB;EACA,OAAA;GAL2B,SAAS;GAAY;GAAS;EAKrD;EACJ;EACA;EACA;EAGA,OAAO,cAAc,MAAM,IAAI;GAAE,GAAG;GAAM,MAAM;EAAS,IAAI;EAE7D,cAAc;GAGZ;GACA,gBAAgB;GAChB,gBAAgB,SAAS,UAAU;GACnC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,UAAU,UAAyC;IAGjD,IAAI,UAAU;IACd,SAAS,CAAC,YAAY,oBAAoB,MAAM,aAAa,CAAC,CAAC,CAAC;GAClE;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,UAAU,YAAY,OAAO;AAC5D;AAEA,OAAO,cAAc"}