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

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`, `focusgroupstart` (with `experimental_focusgroup`), `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":";;;;iBAmBiB;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,89 @@
+"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 { TabsListContext, useTabsContext } from "./tabs-context.mjs";
+import { anchorName, panelId, tabId } from "./tabs-ids.mjs";
+import { use } from "react";
+//#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`, `focusgroupstart` (with `experimental_focusgroup`), `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 listCtx = use(TabsListContext);
+	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 : listCtx?.nativeFocusgroup ? void 0 : -1,
+			...listCtx?.focusgroup === true && { focusgroupstart: selected ? "" : void 0 },
+			"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 { use } from \"react\";\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 { TabsListContext, 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`, `focusgroupstart` (with `experimental_focusgroup`), `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 listCtx = use(TabsListContext);\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      // Roving tabindex, except on the native `focusgroup` path, where the browser owns the tab\n      // stop and a negative tabindex would take the Tab out of the group (TabsListContextValue).\n      tabIndex: selected ? 0 : listCtx?.nativeFocusgroup ? undefined : -1,\n      // Always rendered with the flag (inert where unsupported), so markup is stable.\n      ...(listCtx?.focusgroup === true && { focusgroupstart: selected ? \"\" : undefined }),\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":";;;;;;;;AAuDA,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,UAAU,IAAI,eAAe;CACnC,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;GAGnC,UAAU,WAAW,IAAI,SAAS,mBAAmB,KAAA,IAAY;GAEjE,GAAI,SAAS,eAAe,QAAQ,EAAE,iBAAiB,WAAW,KAAK,KAAA,EAAU;GACjF,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"}

package/dist/tooltip/index.d.mts

@@ -0,0 +1,20 @@
+import "../internal/platform-attributes.mjs";
+import { TooltipAlign, TooltipPopup, TooltipPopupProps, TooltipPopupState, TooltipSide } from "./tooltip-popup.mjs";
+import { TooltipProvides } from "./tooltip-context.mjs";
+import { TooltipRoot, TooltipRootProps, TooltipRootState } from "./tooltip-root.mjs";
+import { TooltipTrigger, TooltipTriggerProps, TooltipTriggerState } from "./tooltip-trigger.mjs";
+//#region src/tooltip/index.d.ts
+/**
+ * Tooltip (WAI-ARIA APG Tooltip pattern): `Root` (no DOM) owns the id and the interaction,
+ * `Trigger` (button) is hovered or focused, `Popup` (`div[popover] role="tooltip"`) lives in the
+ * top layer and is placed with CSS Anchor Positioning. Open state is browser-owned: no `open`
+ * prop, no action, style with `:popover-open`. Render the Popup immediately after the Trigger.
+ */
+export declare const Tooltip: {
+  readonly Root: typeof TooltipRoot;
+  readonly Trigger: typeof TooltipTrigger;
+  readonly Popup: typeof TooltipPopup;
+};
+//#endregion
+export type { TooltipAlign, TooltipPopupProps, TooltipPopupState, TooltipProvides, TooltipRootProps, TooltipRootState, TooltipSide, TooltipTriggerProps, TooltipTriggerState };
+//# sourceMappingURL=index.d.mts.map

package/dist/tooltip/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/tooltip/index.ts"],"mappings":";;;;;;;;;;;;qBAaa;WACX,aAAI;WACJ,gBAAO;WACP,cAAK"}

package/dist/tooltip/index.mjs

@@ -0,0 +1,19 @@
+import { TooltipPopup } from "./tooltip-popup.mjs";
+import { TooltipRoot } from "./tooltip-root.mjs";
+import { TooltipTrigger } from "./tooltip-trigger.mjs";
+//#region src/tooltip/index.ts
+/**
+* Tooltip (WAI-ARIA APG Tooltip pattern): `Root` (no DOM) owns the id and the interaction,
+* `Trigger` (button) is hovered or focused, `Popup` (`div[popover] role="tooltip"`) lives in the
+* top layer and is placed with CSS Anchor Positioning. Open state is browser-owned: no `open`
+* prop, no action, style with `:popover-open`. Render the Popup immediately after the Trigger.
+*/
+const Tooltip = {
+	Root: TooltipRoot,
+	Trigger: TooltipTrigger,
+	Popup: TooltipPopup
+};
+//#endregion
+export { Tooltip };
+
+//# sourceMappingURL=index.mjs.map

package/dist/tooltip/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/tooltip/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only: the\n// built JS has no import of it.\nimport \"../internal/platform-attributes.js\";\nimport { TooltipPopup } from \"./tooltip-popup.js\";\nimport { TooltipRoot } from \"./tooltip-root.js\";\nimport { TooltipTrigger } from \"./tooltip-trigger.js\";\n\n/**\n * Tooltip (WAI-ARIA APG Tooltip pattern): `Root` (no DOM) owns the id and the interaction,\n * `Trigger` (button) is hovered or focused, `Popup` (`div[popover] role=\"tooltip\"`) lives in the\n * top layer and is placed with CSS Anchor Positioning. Open state is browser-owned: no `open`\n * prop, no action, style with `:popover-open`. Render the Popup immediately after the Trigger.\n */\nexport const Tooltip = {\n  Root: TooltipRoot,\n  Trigger: TooltipTrigger,\n  Popup: TooltipPopup,\n} as const;\n\nexport type { TooltipRootProps, TooltipRootState, TooltipProvides } from \"./tooltip-root.js\";\nexport type { TooltipTriggerProps, TooltipTriggerState } from \"./tooltip-trigger.js\";\nexport type {\n  TooltipPopupProps,\n  TooltipPopupState,\n  TooltipSide,\n  TooltipAlign,\n} from \"./tooltip-popup.js\";\n"],"mappings":";;;;;;;;;;AAaA,MAAa,UAAU;CACrB,MAAM;CACN,SAAS;CACT,OAAO;AACT"}

package/dist/tooltip/tooltip-context.d.mts

@@ -0,0 +1,5 @@
+//#region src/tooltip/tooltip-context.d.ts
+/** Which accessibility relation the tooltip provides for its trigger (design section 5.1). */
+export type TooltipProvides = "description" | "name";
+//#endregion
+//# sourceMappingURL=tooltip-context.d.mts.map

package/dist/tooltip/tooltip-context.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-context.d.mts","names":[],"sources":["../../src/tooltip/tooltip-context.ts"],"mappings":";;YAIY"}

package/dist/tooltip/tooltip-context.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/tooltip/tooltip-context.ts
+const TooltipContext = createContext(null);
+function useTooltipContext(part) {
+	const context = use(TooltipContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Tooltip.Root.`);
+	return context;
+}
+//#endregion
+export { TooltipContext, useTooltipContext };
+
+//# sourceMappingURL=tooltip-context.mjs.map

package/dist/tooltip/tooltip-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-context.mjs","names":[],"sources":["../../src/tooltip/tooltip-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\n\n/** Which accessibility relation the tooltip provides for its trigger (design section 5.1). */\nexport type TooltipProvides = \"description\" | \"name\";\n\nexport interface TooltipContextValue {\n  /** Id of the Popup; the Trigger references it through `aria-describedby` / `aria-labelledby`. */\n  readonly popupId: string;\n  readonly disabled: boolean;\n  /** Written onto the Trigger as `interest-delay-start` / `-end` on the native path. */\n  readonly delay: number;\n  readonly closeDelay: number;\n  readonly provides: TooltipProvides;\n  /** Trigger and Popup register their elements through callback refs (design 12.2). */\n  readonly setTriggerElement: (element: HTMLElement | null) => void;\n  readonly setPopupElement: (element: HTMLElement | null) => void;\n  /**\n   * The Trigger reports whether it renders `interestfor`, so the Root's interaction effect re-runs\n   * (and re-detects the native path) when `experimental_interestFor` changes after mount.\n   */\n  readonly setInterestForRequested: (requested: boolean) => void;\n}\n\nexport const TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport function useTooltipContext(part: string): TooltipContextValue {\n  const context = use(TooltipContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Tooltip.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAwBA,MAAa,iBAAiB,cAA0C,IAAI;AAE5E,SAAgB,kBAAkB,MAAmC;CACnE,MAAM,UAAU,IAAI,cAAc;CAClC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,yCAAyC;CAEnE,OAAO;AACT"}

package/dist/tooltip/tooltip-popup.d.mts

@@ -0,0 +1,49 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/tooltip/tooltip-popup.d.ts
+export type TooltipSide = "top" | "bottom" | "left" | "right";
+export type TooltipAlign = "start" | "center" | "end";
+export interface TooltipPopupState {
+  readonly disabled: boolean;
+  readonly side: TooltipSide | null;
+  readonly align: TooltipAlign;
+}
+export interface TooltipPopupProps extends Omit<ComponentPropsWithRef<"div">, "id" | "popover" | "role" | "className" | "style" | "children"> {
+  /**
+   * Placement relative to the trigger through inline `position-area`, with
+   * `position-try-fallbacks` flipping it when it does not fit. Default `"top"`. `null` emits no
+   * inline positioning (and no `data-side` / `data-align`), so a stylesheet owns placement.
+   */
+  side?: TooltipSide | null;
+  /** Alignment along the side. Default `"center"`. Ignored when `side` is `null`. */
+  align?: TooltipAlign;
+  /**
+   * Experimental (Chrome 151+, Firefox 153+; Safari 27.0 treats it as `"manual"`). Renders
+   * `popover="hint"` instead of `popover="manual"`: native light dismiss, and the tooltip can
+   * open over an `auto` popover (a menu) without closing it. The JS Escape / pointerdown handling
+   * stays in place for engines that do not know `hint`. Default `false`.
+   */
+  experimental_hint?: boolean;
+  className?: StateValue<string | undefined, TooltipPopupState>;
+  style?: StateValue<CSSProperties | undefined, TooltipPopupState>;
+  /**
+   * Rendered at mount (hidden by the popover's `display: none`), not at open time. Tooltip
+   * content should be static; if it must suspend, put the `<Suspense>` boundary inside the Popup.
+   */
+  children?: StateValue<ReactNode, TooltipPopupState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, TooltipPopupState>;
+}
+/**
+ * The tooltip content: a `div` with `popover` and `role="tooltip"`, shown in the top layer and
+ * anchored to the trigger implicitly (`interestfor` or `showPopover({ source })`). Open state is
+ * browser-owned: style it with `:popover-open` and animate it with `@starting-style` in CSS.
+ *
+ * Owned keys (conventions 1.2): `id`, `popover`, `role`, `data-disabled`, and `data-side` /
+ * `data-align` unless `side` is `null`.
+ */
+export declare function TooltipPopup({ side, align, experimental_hint, className, style, children, render, ...rest }: TooltipPopupProps): ReactNode;
+export declare namespace TooltipPopup {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=tooltip-popup.d.mts.map

package/dist/tooltip/tooltip-popup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-popup.d.mts","names":[],"sources":["../../src/tooltip/tooltip-popup.tsx"],"mappings":";;;YASY;YACA;iBAEK;WACN;WACA,MAAM;WACN,OAAO;;iBAGD,0BAA0B,KACzC;;;;;;EAQA,OAAO;;EAEP,QAAQ;;;;;;;EAOR;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;;;;EAK9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;wBAWpC,eACd,MACA,OACA,mBACA,WACA,OACA,UACA,WACG,QACF,oBAAiB;yBATJ"}

package/dist/tooltip/tooltip-popup.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { POSITION_TRY_FALLBACKS, positionArea } from "../internal/anchor-position.mjs";
+import { useTooltipContext } from "./tooltip-context.mjs";
+//#region src/tooltip/tooltip-popup.tsx
+/**
+* The tooltip content: a `div` with `popover` and `role="tooltip"`, shown in the top layer and
+* anchored to the trigger implicitly (`interestfor` or `showPopover({ source })`). Open state is
+* browser-owned: style it with `:popover-open` and animate it with `@starting-style` in CSS.
+*
+* Owned keys (conventions 1.2): `id`, `popover`, `role`, `data-disabled`, and `data-side` /
+* `data-align` unless `side` is `null`.
+*/
+function TooltipPopup({ side = "top", align = "center", experimental_hint = false, className, style, children, render, ...rest }) {
+	const ctx = useTooltipContext("Tooltip.Popup");
+	const state = {
+		disabled: ctx.disabled,
+		side,
+		align
+	};
+	const libraryProps = {
+		id: ctx.popupId,
+		popover: experimental_hint ? "hint" : "manual",
+		role: "tooltip",
+		"data-disabled": dataAttr(ctx.disabled),
+		...side !== null && {
+			"data-side": side,
+			"data-align": align
+		}
+	};
+	return useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style: side === null ? style : (s) => ({
+			positionArea: positionArea(side, align),
+			positionTryFallbacks: POSITION_TRY_FALLBACKS,
+			...resolveStateValue(style, s)
+		}),
+		children,
+		props: rest,
+		libraryProps,
+		ref: ctx.setPopupElement
+	});
+}
+TooltipPopup.displayName = "TooltipPopup";
+//#endregion
+export { TooltipPopup };
+
+//# sourceMappingURL=tooltip-popup.mjs.map

package/dist/tooltip/tooltip-popup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-popup.mjs","names":[],"sources":["../../src/tooltip/tooltip-popup.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { POSITION_TRY_FALLBACKS, positionArea } from \"../internal/anchor-position.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useTooltipContext } from \"./tooltip-context.js\";\n\nexport type TooltipSide = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type TooltipAlign = \"start\" | \"center\" | \"end\";\n\nexport interface TooltipPopupState {\n  readonly disabled: boolean;\n  readonly side: TooltipSide | null;\n  readonly align: TooltipAlign;\n}\n\nexport interface TooltipPopupProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"id\" | \"popover\" | \"role\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Placement relative to the trigger through inline `position-area`, with\n   * `position-try-fallbacks` flipping it when it does not fit. Default `\"top\"`. `null` emits no\n   * inline positioning (and no `data-side` / `data-align`), so a stylesheet owns placement.\n   */\n  side?: TooltipSide | null;\n  /** Alignment along the side. Default `\"center\"`. Ignored when `side` is `null`. */\n  align?: TooltipAlign;\n  /**\n   * Experimental (Chrome 151+, Firefox 153+; Safari 27.0 treats it as `\"manual\"`). Renders\n   * `popover=\"hint\"` instead of `popover=\"manual\"`: native light dismiss, and the tooltip can\n   * open over an `auto` popover (a menu) without closing it. The JS Escape / pointerdown handling\n   * stays in place for engines that do not know `hint`. Default `false`.\n   */\n  experimental_hint?: boolean;\n  className?: StateValue<string | undefined, TooltipPopupState>;\n  style?: StateValue<CSSProperties | undefined, TooltipPopupState>;\n  /**\n   * Rendered at mount (hidden by the popover's `display: none`), not at open time. Tooltip\n   * content should be static; if it must suspend, put the `<Suspense>` boundary inside the Popup.\n   */\n  children?: StateValue<ReactNode, TooltipPopupState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TooltipPopupState>;\n}\n\n/**\n * The tooltip content: a `div` with `popover` and `role=\"tooltip\"`, shown in the top layer and\n * anchored to the trigger implicitly (`interestfor` or `showPopover({ source })`). Open state is\n * browser-owned: style it with `:popover-open` and animate it with `@starting-style` in CSS.\n *\n * Owned keys (conventions 1.2): `id`, `popover`, `role`, `data-disabled`, and `data-side` /\n * `data-align` unless `side` is `null`.\n */\nexport function TooltipPopup({\n  side = \"top\",\n  align = \"center\",\n  experimental_hint = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TooltipPopupProps) {\n  const ctx = useTooltipContext(\"Tooltip.Popup\");\n  const state: TooltipPopupState = { disabled: ctx.disabled, side, align };\n\n  const libraryProps: ComponentPropsWithRef<\"div\"> & DataAttributes = {\n    id: ctx.popupId,\n    popover: experimental_hint ? \"hint\" : \"manual\",\n    role: \"tooltip\",\n    \"data-disabled\": dataAttr(ctx.disabled),\n    // Not owned with `side={null}`: the stylesheet (or a render element) may set them.\n    ...(side !== null && { \"data-side\": side, \"data-align\": align }),\n  };\n\n  return useRender<ComponentPropsWithRef<\"div\">, TooltipPopupState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    // The inline placement sits under the consumer's style: the consumer wins (design 3).\n    style:\n      side === null\n        ? style\n        : (s) => ({\n            positionArea: positionArea(side, align),\n            positionTryFallbacks: POSITION_TRY_FALLBACKS,\n            ...resolveStateValue(style, s),\n          }),\n    children,\n    props: rest,\n    libraryProps,\n    ref: ctx.setPopupElement,\n  });\n}\n\nTooltipPopup.displayName = \"TooltipPopup\";\n"],"mappings":";;;;;;;;;;;;;;AAuDA,SAAgB,aAAa,EAC3B,OAAO,OACP,QAAQ,UACR,oBAAoB,OACpB,WACA,OACA,UACA,QACA,GAAG,QACiB;CACpB,MAAM,MAAM,kBAAkB,eAAe;CAC7C,MAAM,QAA2B;EAAE,UAAU,IAAI;EAAU;EAAM;CAAM;CAEvE,MAAM,eAA8D;EAClE,IAAI,IAAI;EACR,SAAS,oBAAoB,SAAS;EACtC,MAAM;EACN,iBAAiB,SAAS,IAAI,QAAQ;EAEtC,GAAI,SAAS,QAAQ;GAAE,aAAa;GAAM,cAAc;EAAM;CAChE;CAEA,OAAO,UAA2D;EAChE,gBAAgB;EAChB;EACA;EACA;EAEA,OACE,SAAS,OACL,SACC,OAAO;GACN,cAAc,aAAa,MAAM,KAAK;GACtC,sBAAsB;GACtB,GAAG,kBAAkB,OAAO,CAAC;EAC/B;EACN;EACA,OAAO;EACP;EACA,KAAK,IAAI;CACX,CAAC;AACH;AAEA,aAAa,cAAc"}