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

package/dist/popover/popover-popup.mjs

@@ -0,0 +1,93 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { POSITION_TRY_FALLBACKS, positionArea } from "../internal/anchor-position.mjs";
+import { PopoverPopupContext, usePopoverContext } from "./popover-context.mjs";
+import { usePopoverPopup } from "../internal/use-popover-popup.mjs";
+import { Activity } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/popover/popover-popup.tsx
+/**
+* The popover itself: a `<dialog popover="auto" aria-modal="false" role="dialog">` with the id
+* the Trigger's `commandfor` names, placed against the Trigger with CSS Anchor Positioning and
+* wired to Title and Description through `aria-labelledby` / `aria-describedby`. Style it with
+* `:popover-open`; it emits `data-side` / `data-align` but no `data-open`.
+*
+* In library mode the children render from committed state, so content that suspends keeps the
+* popover closed (and the Trigger pending) until it is ready; `showPopover({ source: trigger })`
+* runs in the layout effect of the commit that mounted them, and a library-driven close runs
+* `hidePopover()` in the commit that ends it. Dismissals are the browser's: the native `toggle`
+* event becomes `openChangeAction(false, { reason: "dismiss" })`.
+*
+* Owned keys (conventions 1.2): `id`, `popover`, `open`, `aria-modal`, `aria-labelledby` and
+* `aria-describedby` (token-merged), and `data-side` / `data-align` unless `side` is `null`.
+* `role` is a default (`"dialog"`) the consumer may override.
+*/
+function PopoverPopup({ side = "bottom", align = "center", keepMounted, initialFocus, transition, className, style, children, render, ...rest }) {
+	const ctx = usePopoverContext("Popover.Popup");
+	const isLibrary = ctx.mode === "library";
+	const { ids } = ctx;
+	useDevWarning(!isLibrary && transition !== void 0, "Popover.Popup: `transition` has no effect in JS-free mode; the browser opens and closes the popover outside any React transition. Animate it with CSS (`@starting-style`).");
+	useDevWarning(!isLibrary && keepMounted === false, "Popover.Popup: `keepMounted={false}` cannot be honoured in JS-free mode; the content is always mounted so that the server HTML is complete.");
+	const { setElement, visible, wrapContent } = usePopoverPopup(ctx, {
+		part: "Popover.Popup",
+		initialFocus,
+		keepMounted,
+		transition: isLibrary ? transition : void 0
+	});
+	const state = {
+		open: ctx.committed,
+		side,
+		align
+	};
+	const content = (s) => {
+		let node;
+		if (!isLibrary) node = resolveStateValue(children, s);
+		else if (keepMounted === true) node = /* @__PURE__ */ jsx(Activity, {
+			mode: visible ? "visible" : "hidden",
+			children: wrapContent(resolveStateValue(children, s))
+		});
+		else node = visible ? wrapContent(resolveStateValue(children, s)) : null;
+		return /* @__PURE__ */ jsx(PopoverPopupContext, {
+			value: s,
+			children: node
+		});
+	};
+	const libraryProps = {
+		id: ids.popup,
+		popover: "auto",
+		open: void 0,
+		"aria-modal": "false",
+		"aria-labelledby": ids.title,
+		"aria-describedby": ids.description,
+		...side !== null && {
+			"data-side": side,
+			"data-align": align
+		}
+	};
+	const element = useRender({
+		defaultElement: "dialog",
+		render,
+		state,
+		className,
+		style: side === null ? style : (s) => ({
+			positionArea: positionArea(side, align),
+			positionTryFallbacks: POSITION_TRY_FALLBACKS,
+			...resolveStateValue(style, s)
+		}),
+		children: content,
+		props: {
+			role: "dialog",
+			...rest
+		},
+		libraryProps,
+		ref: setElement
+	});
+	return useTransitionBoundary("Popover.Popup", isLibrary ? transition : void 0, element);
+}
+PopoverPopup.displayName = "PopoverPopup";
+//#endregion
+export { PopoverPopup };
+
+//# sourceMappingURL=popover-popup.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-popup.mjs","names":[],"sources":["../../src/popover/popover-popup.tsx"],"sourcesContent":["\"use client\";\nimport { Activity } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  ReactNode,\n  RefObject,\n  ViewTransitionClass,\n} from \"react\";\nimport { POSITION_TRY_FALLBACKS, positionArea } from \"../internal/anchor-position.js\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { usePopoverPopup } from \"../internal/use-popover-popup.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { PopoverPopupContext, usePopoverContext } from \"./popover-context.js\";\n\nexport type PopoverSide = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type PopoverAlign = \"start\" | \"center\" | \"end\";\n\nexport interface PopoverPopupState {\n  /** Committed open state (library mode); `false` in JS-free mode. Read `:popover-open` for the DOM truth. */\n  readonly open: boolean;\n  readonly side: PopoverSide | null;\n  readonly align: PopoverAlign;\n}\n\nexport interface PopoverPopupProps extends Omit<\n  ComponentPropsWithRef<\"dialog\">,\n  | \"id\"\n  | \"popover\"\n  | \"open\"\n  | \"aria-modal\"\n  | \"onToggle\"\n  | \"onBeforeToggle\"\n  | \"className\"\n  | \"style\"\n  | \"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 `\"bottom\"`. `null` emits\n   * no inline positioning (and no `data-side` / `data-align`), so a stylesheet owns placement.\n   */\n  side?: PopoverSide | null;\n  /** Alignment along the side. Default `\"center\"`. Ignored when `side` is `null`. */\n  align?: PopoverAlign;\n  /**\n   * Library mode: what happens to the children while the popover is closed.\n   * - `false` (default): not rendered. Mounting them is part of the opening transition, so\n   *   content that suspends holds the open until it is ready. Unmount waits for the popover's\n   *   exit animation (CSS), or happens in the close commit when `transition` is set.\n   * - `true`: rendered inside `<Activity mode=\"hidden\">`: DOM and state preserved, effects\n   *   stopped, pre-rendered at low priority. Not in the server HTML.\n   *\n   * Ignored in JS-free mode (always mounted).\n   */\n  keepMounted?: boolean;\n  /**\n   * Element to focus when the popover opens: a ref, or a selector resolved inside the popup.\n   * The library writes `autofocus` on it right before `showPopover()` and the platform focuses\n   * it. Default: the platform's choice for a `<dialog>` (first focusable descendant; the popup\n   * itself if none); for `render={<div />}` focus stays on the Trigger.\n   *\n   * In JS-free mode the browser opens the popover itself, so the attribute is written after\n   * hydration and kept while mounted; before hydration only `autoFocus` in the markup works.\n   */\n  initialFocus?: RefObject<HTMLElement | null> | string;\n  /**\n   * Library mode only. Forwarded to the `<ViewTransition default>` around the popover element\n   * itself. Animates the opening commit, content changes while open, and every library-driven\n   * close (Trigger, Close, controlled `open={false}`), in all engines; dismissals (Escape,\n   * click outside) are the browser's and animate with CSS only. Ignored (dev warning) in JS-free\n   * mode.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. A Root inserted by a transition with\n   * `transition` set on its Popup pays the page cross-fade (issue #35); a plain open does not,\n   * because the children mount under the already-mounted popover element.\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, PopoverPopupState>;\n  style?: StateValue<CSSProperties | undefined, PopoverPopupState>;\n  children?: StateValue<ReactNode, PopoverPopupState>;\n  /** A `<dialog>` (default) or a `<div>` (focus stays on the Trigger). */\n  render?: RenderProp<ComponentPropsWithRef<\"dialog\">, PopoverPopupState>;\n}\n\n/**\n * The popover itself: a `<dialog popover=\"auto\" aria-modal=\"false\" role=\"dialog\">` with the id\n * the Trigger's `commandfor` names, placed against the Trigger with CSS Anchor Positioning and\n * wired to Title and Description through `aria-labelledby` / `aria-describedby`. Style it with\n * `:popover-open`; it emits `data-side` / `data-align` but no `data-open`.\n *\n * In library mode the children render from committed state, so content that suspends keeps the\n * popover closed (and the Trigger pending) until it is ready; `showPopover({ source: trigger })`\n * runs in the layout effect of the commit that mounted them, and a library-driven close runs\n * `hidePopover()` in the commit that ends it. Dismissals are the browser's: the native `toggle`\n * event becomes `openChangeAction(false, { reason: \"dismiss\" })`.\n *\n * Owned keys (conventions 1.2): `id`, `popover`, `open`, `aria-modal`, `aria-labelledby` and\n * `aria-describedby` (token-merged), and `data-side` / `data-align` unless `side` is `null`.\n * `role` is a default (`\"dialog\"`) the consumer may override.\n */\nexport function PopoverPopup({\n  side = \"bottom\",\n  align = \"center\",\n  keepMounted,\n  initialFocus,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: PopoverPopupProps) {\n  const ctx = usePopoverContext(\"Popover.Popup\");\n  const isLibrary = ctx.mode === \"library\";\n  const { ids } = ctx;\n\n  useDevWarning(\n    !isLibrary && transition !== undefined,\n    \"Popover.Popup: `transition` has no effect in JS-free mode; the browser opens and closes the \" +\n      \"popover outside any React transition. Animate it with CSS (`@starting-style`).\",\n  );\n  useDevWarning(\n    !isLibrary && keepMounted === false,\n    \"Popover.Popup: `keepMounted={false}` cannot be honoured in JS-free mode; the content is \" +\n      \"always mounted so that the server HTML is complete.\",\n  );\n\n  const { setElement, visible, wrapContent } = usePopoverPopup(ctx, {\n    part: \"Popover.Popup\",\n    initialFocus,\n    keepMounted,\n    transition: isLibrary ? transition : undefined,\n  });\n\n  const state: PopoverPopupState = { open: ctx.committed, side, align };\n\n  const content = (s: PopoverPopupState): ReactNode => {\n    let node: ReactNode;\n    if (!isLibrary) {\n      node = resolveStateValue(children, s);\n    } else if (keepMounted === true) {\n      // The mode changes with committed state, inside the Root's transition (conventions 5.5);\n      // it stays visible while an exit animation runs.\n      node = (\n        <Activity mode={visible ? \"visible\" : \"hidden\"}>\n          {wrapContent(resolveStateValue(children, s))}\n        </Activity>\n      );\n    } else {\n      node = visible ? wrapContent(resolveStateValue(children, s)) : null;\n    }\n    return <PopoverPopupContext value={s}>{node}</PopoverPopupContext>;\n  };\n\n  const libraryProps: ComponentPropsWithRef<\"dialog\"> & DataAttributes = {\n    id: ids.popup,\n    popover: \"auto\",\n    // Never rendered: `showPopover()` does not set it, and an `open` attribute would show the\n    // <dialog> outside the top layer. Owned so a `render` element cannot add it.\n    open: undefined,\n    // Chromium exposes a <dialog popover> as modal without it (research; issue #44).\n    \"aria-modal\": \"false\",\n    \"aria-labelledby\": ids.title,\n    \"aria-describedby\": ids.description,\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  const element = useRender<ComponentPropsWithRef<\"dialog\">, PopoverPopupState>({\n    defaultElement: \"dialog\",\n    render,\n    state,\n    className,\n    // The inline placement sits under the consumer's style: the consumer wins (design 8).\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: content,\n    // `role` is a default the consumer's `rest` overrides (design 3.3): WebKit implements no\n    // minimum role for `[popover]`, and a `<div>` popup needs it.\n    props: { role: \"dialog\", ...rest },\n    libraryProps,\n    ref: setElement,\n  });\n\n  return useTransitionBoundary(\"Popover.Popup\", isLibrary ? transition : undefined, element);\n}\n\nPopoverPopup.displayName = \"PopoverPopup\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyGA,SAAgB,aAAa,EAC3B,OAAO,UACP,QAAQ,UACR,aACA,cACA,YACA,WACA,OACA,UACA,QACA,GAAG,QACiB;CACpB,MAAM,MAAM,kBAAkB,eAAe;CAC7C,MAAM,YAAY,IAAI,SAAS;CAC/B,MAAM,EAAE,QAAQ;CAEhB,cACE,CAAC,aAAa,eAAe,KAAA,GAC7B,4KAEF;CACA,cACE,CAAC,aAAa,gBAAgB,OAC9B,6IAEF;CAEA,MAAM,EAAE,YAAY,SAAS,gBAAgB,gBAAgB,KAAK;EAChE,MAAM;EACN;EACA;EACA,YAAY,YAAY,aAAa,KAAA;CACvC,CAAC;CAED,MAAM,QAA2B;EAAE,MAAM,IAAI;EAAW;EAAM;CAAM;CAEpE,MAAM,WAAW,MAAoC;EACnD,IAAI;EACJ,IAAI,CAAC,WACH,OAAO,kBAAkB,UAAU,CAAC;OAC/B,IAAI,gBAAgB,MAGzB,OACE,oBAAC,UAAD;GAAU,MAAM,UAAU,YAAY;GACnC,UAAA,YAAY,kBAAkB,UAAU,CAAC,CAAC;EACnC,CAAA;OAGZ,OAAO,UAAU,YAAY,kBAAkB,UAAU,CAAC,CAAC,IAAI;EAEjE,OAAO,oBAAC,qBAAD;GAAqB,OAAO;GAAI,UAAA;EAA0B,CAAA;CACnE;CAEA,MAAM,eAAiE;EACrE,IAAI,IAAI;EACR,SAAS;EAGT,MAAM,KAAA;EAEN,cAAc;EACd,mBAAmB,IAAI;EACvB,oBAAoB,IAAI;EAExB,GAAI,SAAS,QAAQ;GAAE,aAAa;GAAM,cAAc;EAAM;CAChE;CAEA,MAAM,UAAU,UAA8D;EAC5E,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,UAAU;EAGV,OAAO;GAAE,MAAM;GAAU,GAAG;EAAK;EACjC;EACA,KAAK;CACP,CAAC;CAED,OAAO,sBAAsB,iBAAiB,YAAY,aAAa,KAAA,GAAW,OAAO;AAC3F;AAEA,aAAa,cAAc"}

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

@@ -0,0 +1,64 @@
+import { ActionDetails, ChangeAction, ChangeReason, StateValue } from "../internal/types.mjs";
+import { ReactNode } from "react";
+//#region src/popover/popover-root.d.ts
+/** Details passed as the second argument of `openChangeAction`. */
+export interface PopoverOpenChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user acted on a part: Trigger (open or close), Close, or a foreign invoker
+   * (`details.event` is a `CommandEvent` / `ToggleEvent` then).
+   * `"dismiss"`: the user closed the popover without a part: Escape, Android back, an assistive-
+   * technology dismiss gesture, a click outside; or script / another top-layer element hid it.
+   * `"platform"`: the popover was found open on mount (opened before hydration); `event` is
+   * `undefined`.
+   */
+  readonly reason: ChangeReason;
+}
+export interface PopoverRootState {
+  /** Optimistic open state (`false` in JS-free mode). Content rendered from it must not suspend. */
+  readonly open: boolean;
+  /** An `openChangeAction` dispatched through this Popover is in flight (library mode only). */
+  readonly pending: boolean;
+}
+export interface PopoverRootProps {
+  /**
+   * Controlled open state. `undefined` means uncontrolled (and, with `defaultOpen` and
+   * `openChangeAction` also absent, JS-free mode).
+   */
+  open?: boolean;
+  /**
+   * Initial open state in uncontrolled library mode. Opens after hydration, never in the server
+   * HTML.
+   */
+  defaultOpen?: boolean;
+  /**
+   * Awaited for `true` (the popover opens when it resolves and the content has rendered) and for
+   * a `false` the user asked a part for (Trigger, Close: the popover hides when it resolves, with
+   * a view transition if `transition` is set; a controlled parent that keeps `open` vetoes it).
+   * A notification for a dismissal (Escape, click outside: the popover is already hidden; the
+   * action runs inside the Root's transition, and a controlled parent that keeps `open` gets it
+   * re-opened, which is not a veto). May be a Server Function. Rejections reach the nearest
+   * Error Boundary above Root.
+   *
+   * A `setState` placed after your own `await` is not a Transition update; wrap it in
+   * `startTransition` (React limitation).
+   */
+  openChangeAction?: ChangeAction<boolean, PopoverOpenChangeDetails>;
+  children?: StateValue<ReactNode, PopoverRootState>;
+}
+/**
+ * Owns the ids, the mode, the open state and the context. Renders no DOM, so it has no `ref`,
+ * `className` or `style`; `pending` is exposed through `children(state)` and the Trigger.
+ *
+ * Without `open`, `defaultOpen` and `openChangeAction` the Popover runs in **JS-free mode**: the
+ * Trigger is a native `command="toggle-popover"` invoker and the browser owns everything. With any
+ * of them it runs in **library mode**: opening and the closes the user asks a part for are
+ * transitions (the Trigger shows `data-pending`, content renders from committed state,
+ * `showPopover()` / `hidePopover()` run when the change has committed); dismissals are the
+ * browser's and `openChangeAction(false)` is a notification.
+ */
+export declare function PopoverRoot({ open, defaultOpen, openChangeAction, children }: PopoverRootProps): import("react").JSX.Element;
+export declare namespace PopoverRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=popover-root.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-root.d.mts","names":[],"sources":["../../src/popover/popover-root.tsx"],"mappings":";;;;iBAQiB,iCAAiC;;;;;;;;;WASvC,QAAQ;;iBAGF;;WAEN;;WAEA;;iBAGM;;;;;EAKf;;;;;EAKA;;;;;;;;;;;;;EAaA,mBAAmB,sBAAsB;EACzC,WAAW,WAAW,WAAW;;;;;;;;;;;;;wBAcnB,cAAc,MAAM,aAAa,kBAAkB,YAAY,mCAAgB,IAAA;yBAA/E"}

package/dist/popover/popover-root.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { resolveStateValue } from "../internal/use-render.mjs";
+import { PopoverContext } from "./popover-context.mjs";
+import { usePopoverRoot } from "../internal/use-popover-root.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/popover/popover-root.tsx
+/**
+* Owns the ids, the mode, the open state and the context. Renders no DOM, so it has no `ref`,
+* `className` or `style`; `pending` is exposed through `children(state)` and the Trigger.
+*
+* Without `open`, `defaultOpen` and `openChangeAction` the Popover runs in **JS-free mode**: the
+* Trigger is a native `command="toggle-popover"` invoker and the browser owns everything. With any
+* of them it runs in **library mode**: opening and the closes the user asks a part for are
+* transitions (the Trigger shows `data-pending`, content renders from committed state,
+* `showPopover()` / `hidePopover()` run when the change has committed); dismissals are the
+* browser's and `openChangeAction(false)` is a notification.
+*/
+function PopoverRoot({ open, defaultOpen, openChangeAction, children }) {
+	const context = usePopoverRoot({
+		component: "popover",
+		part: "Popover.Root",
+		open,
+		defaultOpen,
+		openChangeAction
+	});
+	const state = {
+		open: context.optimistic,
+		pending: context.pending
+	};
+	return /* @__PURE__ */ jsx(PopoverContext, {
+		value: context,
+		children: resolveStateValue(children, state)
+	});
+}
+PopoverRoot.displayName = "PopoverRoot";
+//#endregion
+export { PopoverRoot };
+
+//# sourceMappingURL=popover-root.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-root.mjs","names":[],"sources":["../../src/popover/popover-root.tsx"],"sourcesContent":["\"use client\";\nimport type { ReactNode } from \"react\";\nimport type { ActionDetails, ChangeAction, ChangeReason, StateValue } from \"../internal/types.js\";\nimport { usePopoverRoot } from \"../internal/use-popover-root.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { PopoverContext } from \"./popover-context.js\";\n\n/** Details passed as the second argument of `openChangeAction`. */\nexport interface PopoverOpenChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user acted on a part: Trigger (open or close), Close, or a foreign invoker\n   * (`details.event` is a `CommandEvent` / `ToggleEvent` then).\n   * `\"dismiss\"`: the user closed the popover without a part: Escape, Android back, an assistive-\n   * technology dismiss gesture, a click outside; or script / another top-layer element hid it.\n   * `\"platform\"`: the popover was found open on mount (opened before hydration); `event` is\n   * `undefined`.\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface PopoverRootState {\n  /** Optimistic open state (`false` in JS-free mode). Content rendered from it must not suspend. */\n  readonly open: boolean;\n  /** An `openChangeAction` dispatched through this Popover is in flight (library mode only). */\n  readonly pending: boolean;\n}\n\nexport interface PopoverRootProps {\n  /**\n   * Controlled open state. `undefined` means uncontrolled (and, with `defaultOpen` and\n   * `openChangeAction` also absent, JS-free mode).\n   */\n  open?: boolean;\n  /**\n   * Initial open state in uncontrolled library mode. Opens after hydration, never in the server\n   * HTML.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Awaited for `true` (the popover opens when it resolves and the content has rendered) and for\n   * a `false` the user asked a part for (Trigger, Close: the popover hides when it resolves, with\n   * a view transition if `transition` is set; a controlled parent that keeps `open` vetoes it).\n   * A notification for a dismissal (Escape, click outside: the popover is already hidden; the\n   * action runs inside the Root's transition, and a controlled parent that keeps `open` gets it\n   * re-opened, which is not a veto). May be a Server Function. Rejections reach the nearest\n   * Error Boundary above Root.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation).\n   */\n  openChangeAction?: ChangeAction<boolean, PopoverOpenChangeDetails>;\n  children?: StateValue<ReactNode, PopoverRootState>;\n}\n\n/**\n * Owns the ids, the mode, the open state and the context. Renders no DOM, so it has no `ref`,\n * `className` or `style`; `pending` is exposed through `children(state)` and the Trigger.\n *\n * Without `open`, `defaultOpen` and `openChangeAction` the Popover runs in **JS-free mode**: the\n * Trigger is a native `command=\"toggle-popover\"` invoker and the browser owns everything. With any\n * of them it runs in **library mode**: opening and the closes the user asks a part for are\n * transitions (the Trigger shows `data-pending`, content renders from committed state,\n * `showPopover()` / `hidePopover()` run when the change has committed); dismissals are the\n * browser's and `openChangeAction(false)` is a notification.\n */\nexport function PopoverRoot({ open, defaultOpen, openChangeAction, children }: PopoverRootProps) {\n  const context = usePopoverRoot<PopoverOpenChangeDetails>({\n    component: \"popover\",\n    part: \"Popover.Root\",\n    open,\n    defaultOpen,\n    openChangeAction,\n  });\n\n  const state: PopoverRootState = { open: context.optimistic, pending: context.pending };\n\n  return <PopoverContext value={context}>{resolveStateValue(children, state)}</PopoverContext>;\n}\n\nPopoverRoot.displayName = \"PopoverRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;AAiEA,SAAgB,YAAY,EAAE,MAAM,aAAa,kBAAkB,YAA8B;CAC/F,MAAM,UAAU,eAAyC;EACvD,WAAW;EACX,MAAM;EACN;EACA;EACA;CACF,CAAC;CAED,MAAM,QAA0B;EAAE,MAAM,QAAQ;EAAY,SAAS,QAAQ;CAAQ;CAErF,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAU,UAAA,kBAAkB,UAAU,KAAK;CAAkB,CAAA;AAC7F;AAEA,YAAY,cAAc"}

package/dist/popover/popover-title.d.mts

@@ -0,0 +1,23 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { PopoverPopupState } from "./popover-popup.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/popover/popover-title.d.ts
+export type PopoverTitleState = PopoverPopupState;
+export interface PopoverTitleProps extends Omit<ComponentPropsWithRef<"h2">, "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, PopoverTitleState>;
+  style?: StateValue<CSSProperties | undefined, PopoverTitleState>;
+  children?: StateValue<ReactNode, PopoverTitleState>;
+  /** `render={<h3 />}` changes the heading level. */
+  render?: RenderProp<ComponentPropsWithRef<"h2">, PopoverTitleState>;
+}
+/**
+ * The popover's name: an `<h2>` whose id the Popup references with `aria-labelledby`.
+ *
+ * Owned key (conventions 1.2): `id`.
+ */
+export declare function PopoverTitle({ className, style, children, render, ...rest }: PopoverTitleProps): ReactNode;
+export declare namespace PopoverTitle {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=popover-title.d.mts.map

package/dist/popover/popover-title.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-title.d.mts","names":[],"sources":["../../src/popover/popover-title.tsx"],"mappings":";;;;YAOY,oBAAoB;iBAEf,0BAA0B,KACzC;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,6BAA6B;;;;;;;wBAQnC,eAAe,WAAW,OAAO,UAAU,WAAW,QAAQ,oBAAiB;yBAA/E"}

package/dist/popover/popover-title.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { usePopoverContext, usePopoverPopupState } from "./popover-context.mjs";
+//#region src/popover/popover-title.tsx
+/**
+* The popover's name: an `<h2>` whose id the Popup references with `aria-labelledby`.
+*
+* Owned key (conventions 1.2): `id`.
+*/
+function PopoverTitle({ className, style, children, render, ...rest }) {
+	const ctx = usePopoverContext("Popover.Title");
+	const state = usePopoverPopupState(ctx);
+	return useRender({
+		defaultElement: "h2",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: { id: ctx.ids.title }
+	});
+}
+PopoverTitle.displayName = "PopoverTitle";
+//#endregion
+export { PopoverTitle };
+
+//# sourceMappingURL=popover-title.mjs.map

package/dist/popover/popover-title.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-title.mjs","names":[],"sources":["../../src/popover/popover-title.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { usePopoverContext, usePopoverPopupState } from \"./popover-context.js\";\nimport type { PopoverPopupState } from \"./popover-popup.js\";\n\nexport type PopoverTitleState = PopoverPopupState;\n\nexport interface PopoverTitleProps extends Omit<\n  ComponentPropsWithRef<\"h2\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, PopoverTitleState>;\n  style?: StateValue<CSSProperties | undefined, PopoverTitleState>;\n  children?: StateValue<ReactNode, PopoverTitleState>;\n  /** `render={<h3 />}` changes the heading level. */\n  render?: RenderProp<ComponentPropsWithRef<\"h2\">, PopoverTitleState>;\n}\n\n/**\n * The popover's name: an `<h2>` whose id the Popup references with `aria-labelledby`.\n *\n * Owned key (conventions 1.2): `id`.\n */\nexport function PopoverTitle({ className, style, children, render, ...rest }: PopoverTitleProps) {\n  const ctx = usePopoverContext(\"Popover.Title\");\n  const state = usePopoverPopupState(ctx);\n  return useRender<ComponentPropsWithRef<\"h2\">, PopoverTitleState>({\n    defaultElement: \"h2\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: { id: ctx.ids.title },\n  });\n}\n\nPopoverTitle.displayName = \"PopoverTitle\";\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,aAAa,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA2B;CAC/F,MAAM,MAAM,kBAAkB,eAAe;CAC7C,MAAM,QAAQ,qBAAqB,GAAG;CACtC,OAAO,UAA0D;EAC/D,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc,EAAE,IAAI,IAAI,IAAI,MAAM;CACpC,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/popover/popover-trigger.d.mts

@@ -0,0 +1,37 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/popover/popover-trigger.d.ts
+export interface PopoverTriggerState {
+  /** Optimistic open state (library mode); `false` in JS-free mode. */
+  readonly open: boolean;
+  /** The Root's transition is pending (an open, a part-initiated close or a dismissal notification). */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+export interface PopoverTriggerProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "aria-expanded" | "className" | "style" | "children"> {
+  /** Native `disabled`: a disabled button is not a valid invoker and never dispatches. */
+  disabled?: boolean;
+  className?: StateValue<string | undefined, PopoverTriggerState>;
+  style?: StateValue<CSSProperties | undefined, PopoverTriggerState>;
+  /** Rendered from optimistic state; must not suspend. */
+  children?: StateValue<ReactNode, PopoverTriggerState>;
+  /** Should render a `<button>`; another element works only in library mode (click handler). */
+  render?: RenderProp<ComponentPropsWithRef<"button">, PopoverTriggerState>;
+}
+/**
+ * The toggle: `<button type="button" commandfor command="toggle-popover" aria-expanded>`. In
+ * JS-free mode the browser runs the command and the Popup keeps `aria-expanded` current. In
+ * library mode the click is cancelled (so the command does not run) and dispatched through the
+ * Root's transition: an open, or a library-owned close while open. The button shows optimistic
+ * `data-open` / `aria-expanded` and `data-pending` until the change has landed.
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,
+ * `command`, `aria-expanded`, `onClick` (library mode), `data-open`, `data-pending`,
+ * `data-disabled`. `aria-haspopup` and `aria-controls` pass through.
+ */
+export declare function PopoverTrigger({ disabled, className, style, children, render, ...rest }: PopoverTriggerProps): ReactNode;
+export declare namespace PopoverTrigger {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=popover-trigger.d.mts.map

package/dist/popover/popover-trigger.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.d.mts","names":[],"sources":["../../src/popover/popover-trigger.tsx"],"mappings":";;;iBAOiB;;WAEN;;WAEA;WACA;;iBAGM,4BAA4B,KAC3C;;EAIA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;;wBAcvC,iBACd,UACA,WACA,OACA,UACA,WACG,QACF,sBAAmB;yBAPN"}

package/dist/popover/popover-trigger.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { usePopoverContext } from "./popover-context.mjs";
+import { usePopoverTrigger } from "../internal/use-popover-trigger.mjs";
+//#region src/popover/popover-trigger.tsx
+/**
+* The toggle: `<button type="button" commandfor command="toggle-popover" aria-expanded>`. In
+* JS-free mode the browser runs the command and the Popup keeps `aria-expanded` current. In
+* library mode the click is cancelled (so the command does not run) and dispatched through the
+* Root's transition: an open, or a library-owned close while open. The button shows optimistic
+* `data-open` / `aria-expanded` and `data-pending` until the change has landed.
+*
+* Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,
+* `command`, `aria-expanded`, `onClick` (library mode), `data-open`, `data-pending`,
+* `data-disabled`. `aria-haspopup` and `aria-controls` pass through.
+*/
+function PopoverTrigger({ disabled = false, className, style, children, render, ...rest }) {
+	const ctx = usePopoverContext("Popover.Trigger");
+	const { state, libraryProps, ref } = usePopoverTrigger(ctx, {
+		part: "Popover.Trigger",
+		disabled,
+		render
+	});
+	return useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps,
+		ref
+	});
+}
+PopoverTrigger.displayName = "PopoverTrigger";
+//#endregion
+export { PopoverTrigger };
+
+//# sourceMappingURL=popover-trigger.mjs.map

package/dist/popover/popover-trigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.mjs","names":[],"sources":["../../src/popover/popover-trigger.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { usePopoverTrigger } from \"../internal/use-popover-trigger.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { usePopoverContext } from \"./popover-context.js\";\n\nexport interface PopoverTriggerState {\n  /** Optimistic open state (library mode); `false` in JS-free mode. */\n  readonly open: boolean;\n  /** The Root's transition is pending (an open, a part-initiated close or a dismissal notification). */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface PopoverTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"aria-expanded\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Native `disabled`: a disabled button is not a valid invoker and never dispatches. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, PopoverTriggerState>;\n  style?: StateValue<CSSProperties | undefined, PopoverTriggerState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, PopoverTriggerState>;\n  /** Should render a `<button>`; another element works only in library mode (click handler). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, PopoverTriggerState>;\n}\n\n/**\n * The toggle: `<button type=\"button\" commandfor command=\"toggle-popover\" aria-expanded>`. In\n * JS-free mode the browser runs the command and the Popup keeps `aria-expanded` current. In\n * library mode the click is cancelled (so the command does not run) and dispatched through the\n * Root's transition: an open, or a library-owned close while open. The button shows optimistic\n * `data-open` / `aria-expanded` and `data-pending` until the change has landed.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `disabled`, `commandfor`,\n * `command`, `aria-expanded`, `onClick` (library mode), `data-open`, `data-pending`,\n * `data-disabled`. `aria-haspopup` and `aria-controls` pass through.\n */\nexport function PopoverTrigger({\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: PopoverTriggerProps) {\n  const ctx = usePopoverContext(\"Popover.Trigger\");\n  const { state, libraryProps, ref } = usePopoverTrigger(ctx, {\n    part: \"Popover.Trigger\",\n    disabled,\n    render,\n  });\n\n  return useRender<ComponentPropsWithRef<\"button\">, PopoverTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n    ref,\n  });\n}\n\nPopoverTrigger.displayName = \"PopoverTrigger\";\n"],"mappings":";;;;;;;;;;;;;;;;AAwCA,SAAgB,eAAe,EAC7B,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,MAAM,kBAAkB,iBAAiB;CAC/C,MAAM,EAAE,OAAO,cAAc,QAAQ,kBAAkB,KAAK;EAC1D,MAAM;EACN;EACA;CACF,CAAC;CAED,OAAO,UAAgE;EACrE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACA;CACF,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/radio-group/index.d.mts

@@ -0,0 +1,20 @@
+import "../internal/platform-attributes.mjs";
+import { RadioGroupItem, RadioGroupItemProps, RadioGroupItemState } from "./radio-group-item.mjs";
+import { RadioGroupRoot, RadioGroupRootProps, RadioGroupRootState, RadioGroupValueChangeDetails } from "./radio-group-root.mjs";
+import { RadioGroupLabel, RadioGroupLabelProps } from "./radio-group-label.mjs";
+//#region src/radio-group/index.d.ts
+/**
+ * RadioGroup (WAI-ARIA APG Radio Group pattern, native HTML radio variant): `Root`
+ * (`fieldset[role=radiogroup]`), an optional `Label` (`legend`, first child) and one `Item`
+ * (`input[type=radio]`) per option. The keyboard is entirely native. Each Item's DOM `checked` is
+ * the optimistic value; the Root and the checked Item carry `data-pending` while
+ * `valueChangeAction` is in flight.
+ */
+export declare const RadioGroup: {
+  readonly Root: typeof RadioGroupRoot;
+  readonly Label: typeof RadioGroupLabel;
+  readonly Item: typeof RadioGroupItem;
+};
+//#endregion
+export type { RadioGroupItemProps, RadioGroupItemState, RadioGroupLabelProps, RadioGroupRootProps, RadioGroupRootState, RadioGroupValueChangeDetails };
+//# sourceMappingURL=index.d.mts.map

package/dist/radio-group/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/radio-group/index.ts"],"mappings":";;;;;;;;;;;;qBAca;WACX,aAAI;WACJ,cAAK;WACL,aAAI"}

package/dist/radio-group/index.mjs

@@ -0,0 +1,20 @@
+import { RadioGroupItem } from "./radio-group-item.mjs";
+import { RadioGroupLabel } from "./radio-group-label.mjs";
+import { RadioGroupRoot } from "./radio-group-root.mjs";
+//#region src/radio-group/index.ts
+/**
+* RadioGroup (WAI-ARIA APG Radio Group pattern, native HTML radio variant): `Root`
+* (`fieldset[role=radiogroup]`), an optional `Label` (`legend`, first child) and one `Item`
+* (`input[type=radio]`) per option. The keyboard is entirely native. Each Item's DOM `checked` is
+* the optimistic value; the Root and the checked Item carry `data-pending` while
+* `valueChangeAction` is in flight.
+*/
+const RadioGroup = {
+	Root: RadioGroupRoot,
+	Label: RadioGroupLabel,
+	Item: RadioGroupItem
+};
+//#endregion
+export { RadioGroup };
+
+//# sourceMappingURL=index.mjs.map

package/dist/radio-group/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/radio-group/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 { RadioGroupItem } from \"./radio-group-item.js\";\nimport { RadioGroupLabel } from \"./radio-group-label.js\";\nimport { RadioGroupRoot } from \"./radio-group-root.js\";\n\n/**\n * RadioGroup (WAI-ARIA APG Radio Group pattern, native HTML radio variant): `Root`\n * (`fieldset[role=radiogroup]`), an optional `Label` (`legend`, first child) and one `Item`\n * (`input[type=radio]`) per option. The keyboard is entirely native. Each Item's DOM `checked` is\n * the optimistic value; the Root and the checked Item carry `data-pending` while\n * `valueChangeAction` is in flight.\n */\nexport const RadioGroup = {\n  Root: RadioGroupRoot,\n  Label: RadioGroupLabel,\n  Item: RadioGroupItem,\n} as const;\n\nexport type {\n  RadioGroupRootProps,\n  RadioGroupRootState,\n  RadioGroupValueChangeDetails,\n} from \"./radio-group-root.js\";\nexport type { RadioGroupLabelProps } from \"./radio-group-label.js\";\nexport type { RadioGroupItemProps, RadioGroupItemState } from \"./radio-group-item.js\";\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,aAAa;CACxB,MAAM;CACN,OAAO;CACP,MAAM;AACR"}

package/dist/radio-group/radio-group-context.mjs

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

package/dist/radio-group/radio-group-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-context.mjs","names":[],"sources":["../../src/radio-group/radio-group-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\n\nexport interface RadioGroupContextValue {\n  /** The `name` shared by every radio of the group (prop or `useId()`). */\n  readonly name: string;\n  readonly form: string | undefined;\n  readonly required: boolean;\n  /** Optimistic value: Items render `checked` from it. */\n  readonly optimistic: string | null;\n  readonly pending: boolean;\n  /** `Root disabled` (reaches the radios natively through `<fieldset disabled>`). */\n  readonly disabled: boolean;\n  /**\n   * Uncontrolled mode: the latest `defaultValue` (`null` when omitted), mirrored by each Item into\n   * `el.defaultChecked` so that a form reset returns to it. `undefined` in controlled mode, where\n   * React's mount-time value stays the reset target (conventions 3.8 rule 6).\n   */\n  readonly defaultValue: string | null | undefined;\n  /**\n   * Dispatches a user check. No-op when `value` is already the optimistic value. Checks neither\n   * `disabled` (a disabled radio fires no click) nor `defaultPrevented` (the Item's\n   * `guardCheckableChange` does).\n   */\n  readonly select: (value: string, event: Event) => void;\n  /**\n   * Called by each Item from its mount layout effect. An Item that mounts after the Root (under a\n   * Suspense boundary, selective hydration) asks the Root to reconcile the group again, so a click\n   * made before that Item hydrated is reported once (deduped by the Root's hook). Receives the\n   * Item's element, which the Root uses for the dev-only partial-hydration warning.\n   */\n  readonly onItemMounted: (element: HTMLInputElement | null) => void;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nexport function useRadioGroupContext(part: string): RadioGroupContextValue {\n  const context = use(RadioGroupContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a RadioGroup.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAkCA,MAAa,oBAAoB,cAA6C,IAAI;AAElF,SAAgB,qBAAqB,MAAsC;CACzE,MAAM,UAAU,IAAI,iBAAiB;CACrC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,4CAA4C;CAEtE,OAAO;AACT"}

package/dist/radio-group/radio-group-item.d.mts

@@ -0,0 +1,54 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ViewTransitionClass } from "react";
+//#region src/radio-group/radio-group-item.d.ts
+export interface RadioGroupItemState {
+  readonly value: string;
+  /** Optimistic: true as soon as the user checks this radio, before the action settles. */
+  readonly checked: boolean;
+  /** The Root is pending and this radio is the optimistic target. */
+  readonly pending: boolean;
+  /** Disabled by its own prop or by `Root disabled`. */
+  readonly disabled: boolean;
+}
+export interface RadioGroupItemProps extends Omit<ComponentPropsWithRef<"input">, "type" | "name" | "value" | "checked" | "defaultChecked" | "defaultValue" | "form" | "required" | "onChange" | "className" | "style" | "children"> {
+  /** The value this radio checks. Must be unique within the Root. Submitted as the form value. */
+  value: string;
+  /** Native `disabled`: unfocusable, skipped by arrow keys, never dispatches. */
+  disabled?: boolean;
+  /**
+   * Forwarded to the Item's `<ViewTransition default>`. Default: no boundary. Fires only on the commit
+   * that settles the action (or rolls it back), never on the optimistic check; animate the check
+   * itself with CSS on `:checked`.
+   *
+   * 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, RadioGroupItemState>;
+  style?: StateValue<CSSProperties | undefined, RadioGroupItemState>;
+  /** Replace the rendered element. Must keep an `<input>`; the library sets `type="radio"`. */
+  render?: RenderProp<ComponentPropsWithRef<"input">, RadioGroupItemState>;
+}
+/**
+ * One `<input type="radio">` of the group. Its DOM `checked` is the optimistic value
+ * (`checked={optimistic === value}`): react-dom restores a controlled input to its props after
+ * every event, and only the sync-lane optimistic value survives that restore.
+ *
+ * Owned keys (conventions 1.2; a `render` element's value is overridden): `type`, `name`,
+ * `value`, `checked`, `defaultChecked` (never rendered), `disabled`, `form`, `required`,
+ * `data-checked`, `data-pending`, `data-disabled`. `onChange` is merged: a `render` element's own
+ * handler runs first, then the library's.
+ *
+ * Form reset in controlled mode: React sets an input's `defaultChecked` once, from its initial
+ * `checked`. An Item added on the client while the Root's `value` equals its value gets
+ * `defaultChecked` too, so two radios may carry it and a reset does not necessarily return to
+ * the group's mount-time value (see `RadioGroup.Root` `value`).
+ */
+export declare function RadioGroupItem({ value, disabled: disabledProp, transition, className, style, render, ...rest }: RadioGroupItemProps): import("react").ReactNode;
+export declare namespace RadioGroupItem {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=radio-group-item.d.mts.map

package/dist/radio-group/radio-group-item.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-item.d.mts","names":[],"sources":["../../src/radio-group/radio-group-item.tsx"],"mappings":";;;iBAUiB;WACN;;WAEA;;WAEA;;WAEA;;iBAGM,4BAA4B,KAC3C;;EAeA;;EAEA;;;;;;;;;;;EAWA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,SAAS,WAAW,gCAAgC;;;;;;;;;;;;;;;;;wBAkBtC,iBACd,OACA,UAAU,cACV,YACA,WACA,OACA,WACG,QACF,sCAAmB;yBARN"}

package/dist/radio-group/radio-group-item.mjs

@@ -0,0 +1,83 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
+import { syncPresence } from "../internal/sync-presence.mjs";
+import { useRadioGroupContext } from "./radio-group-context.mjs";
+//#region src/radio-group/radio-group-item.tsx
+/**
+* One `<input type="radio">` of the group. Its DOM `checked` is the optimistic value
+* (`checked={optimistic === value}`): react-dom restores a controlled input to its props after
+* every event, and only the sync-lane optimistic value survives that restore.
+*
+* Owned keys (conventions 1.2; a `render` element's value is overridden): `type`, `name`,
+* `value`, `checked`, `defaultChecked` (never rendered), `disabled`, `form`, `required`,
+* `data-checked`, `data-pending`, `data-disabled`. `onChange` is merged: a `render` element's own
+* handler runs first, then the library's.
+*
+* Form reset in controlled mode: React sets an input's `defaultChecked` once, from its initial
+* `checked`. An Item added on the client while the Root's `value` equals its value gets
+* `defaultChecked` too, so two radios may carry it and a reset does not necessarily return to
+* the group's mount-time value (see `RadioGroup.Root` `value`).
+*/
+function RadioGroupItem({ value, disabled: disabledProp = false, transition, className, style, render, ...rest }) {
+	const ctx = useRadioGroupContext("RadioGroup.Item");
+	const checked = ctx.optimistic === value;
+	const pending = ctx.pending && checked;
+	const disabled = ctx.disabled || disabledProp;
+	const inputRef = useNativeChecked({
+		type: "radio",
+		component: "RadioGroup.Item",
+		checked,
+		group: true,
+		onItemMounted: (el) => {
+			if (el !== null) {
+				syncPresence(el, "data-checked", checked);
+				syncPresence(el, "data-pending", pending);
+				syncPresence(el, "data-disabled", disabled);
+			}
+			ctx.onItemMounted(el);
+		},
+		defaultChecked: ctx.defaultValue === void 0 ? void 0 : ctx.defaultValue === value
+	});
+	const element = useRender({
+		defaultElement: "input",
+		render,
+		state: {
+			value,
+			checked,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children: void 0,
+		ref: inputRef,
+		props: rest,
+		libraryProps: {
+			type: "radio",
+			name: ctx.name,
+			value,
+			checked,
+			defaultChecked: void 0,
+			disabled: disabledProp,
+			form: ctx.form,
+			required: ctx.required,
+			"data-checked": dataAttr(checked),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onChange: (event) => {
+				if (disabled) return;
+				const nativeEvent = event.nativeEvent;
+				guardCheckableChange(nativeEvent, () => ctx.select(value, nativeEvent), "RadioGroup.Item");
+			}
+		}
+	});
+	return useTransitionBoundary("RadioGroup.Item", transition, element);
+}
+RadioGroupItem.displayName = "RadioGroupItem";
+//#endregion
+export { RadioGroupItem };
+
+//# sourceMappingURL=radio-group-item.mjs.map

package/dist/radio-group/radio-group-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-item.mjs","names":[],"sources":["../../src/radio-group/radio-group-item.tsx"],"sourcesContent":["\"use client\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ViewTransitionClass } from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { syncPresence } from \"../internal/sync-presence.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { guardCheckableChange, useNativeChecked } from \"../internal/use-native-checked.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useRadioGroupContext } from \"./radio-group-context.js\";\n\nexport interface RadioGroupItemState {\n  readonly value: string;\n  /** Optimistic: true as soon as the user checks this radio, before the action settles. */\n  readonly checked: boolean;\n  /** The Root is pending and this radio is the optimistic target. */\n  readonly pending: boolean;\n  /** Disabled by its own prop or by `Root disabled`. */\n  readonly disabled: boolean;\n}\n\nexport interface RadioGroupItemProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"name\"\n  | \"value\"\n  | \"checked\"\n  | \"defaultChecked\"\n  | \"defaultValue\"\n  | \"form\"\n  | \"required\"\n  | \"onChange\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** The value this radio checks. Must be unique within the Root. Submitted as the form value. */\n  value: string;\n  /** Native `disabled`: unfocusable, skipped by arrow keys, never dispatches. */\n  disabled?: boolean;\n  /**\n   * Forwarded to the Item's `<ViewTransition default>`. Default: no boundary. Fires only on the commit\n   * that settles the action (or rolls it back), never on the optimistic check; animate the check\n   * itself with CSS on `:checked`.\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, RadioGroupItemState>;\n  style?: StateValue<CSSProperties | undefined, RadioGroupItemState>;\n  /** Replace the rendered element. Must keep an `<input>`; the library sets `type=\"radio\"`. */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, RadioGroupItemState>;\n}\n\n/**\n * One `<input type=\"radio\">` of the group. Its DOM `checked` is the optimistic value\n * (`checked={optimistic === value}`): react-dom restores a controlled input to its props after\n * every event, and only the sync-lane optimistic value survives that restore.\n *\n * Owned keys (conventions 1.2; a `render` element's value is overridden): `type`, `name`,\n * `value`, `checked`, `defaultChecked` (never rendered), `disabled`, `form`, `required`,\n * `data-checked`, `data-pending`, `data-disabled`. `onChange` is merged: a `render` element's own\n * handler runs first, then the library's.\n *\n * Form reset in controlled mode: React sets an input's `defaultChecked` once, from its initial\n * `checked`. An Item added on the client while the Root's `value` equals its value gets\n * `defaultChecked` too, so two radios may carry it and a reset does not necessarily return to\n * the group's mount-time value (see `RadioGroup.Root` `value`).\n */\nexport function RadioGroupItem({\n  value,\n  disabled: disabledProp = false,\n  transition,\n  className,\n  style,\n  render,\n  ...rest\n}: RadioGroupItemProps) {\n  const ctx = useRadioGroupContext(\"RadioGroup.Item\");\n  const checked = ctx.optimistic === value;\n  const pending = ctx.pending && checked;\n  const disabled = ctx.disabled || disabledProp;\n\n  // Group mode: element check and re-apply only; the Root reports the residual paths once. The\n  // hook calls `onItemMounted` at mount so that an Item mounting after its Root (a Suspense\n  // boundary that hydrates later) still gets the group reconciled.\n  const inputRef = useNativeChecked({\n    type: \"radio\",\n    component: \"RadioGroup.Item\",\n    checked,\n    group: true,\n    onItemMounted: (el) => {\n      // Hydration keeps server attributes that differ from the client render (React only warns).\n      // An Item hydrating after its Root (partial hydration, Root JSDoc) can render a different\n      // `checked` than the server did, e.g. after a click on an already hydrated radio, and a\n      // stale `data-checked` would then stay until the prop changes again.\n      if (el !== null) {\n        syncPresence(el, \"data-checked\", checked);\n        syncPresence(el, \"data-pending\", pending);\n        syncPresence(el, \"data-disabled\", disabled);\n      }\n      ctx.onItemMounted(el);\n    },\n    defaultChecked: ctx.defaultValue === undefined ? undefined : ctx.defaultValue === value,\n  });\n\n  const state: RadioGroupItemState = { value, checked, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"input\">, RadioGroupItemState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    ref: inputRef,\n    // Pass-through layer: a `render` element's own props win over these.\n    props: rest,\n    libraryProps: {\n      type: \"radio\",\n      name: ctx.name,\n      value,\n      checked,\n      defaultChecked: undefined,\n      // Owned (Switch precedent) so that native disabledness, `data-disabled` and the click guard\n      // agree. Only the Item's own prop: `Root disabled` reaches the radio through the fieldset.\n      disabled: disabledProp,\n      form: ctx.form,\n      required: ctx.required,\n      \"data-checked\": dataAttr(checked),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLInputElement>) => {\n        // A natively disabled radio fires no click; this covers `render` elements that do not\n        // honour `disabled`.\n        if (disabled) return;\n        const nativeEvent = event.nativeEvent;\n        guardCheckableChange(nativeEvent, () => ctx.select(value, nativeEvent), \"RadioGroup.Item\");\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"RadioGroup.Item\", transition, element);\n}\n\nRadioGroupItem.displayName = \"RadioGroupItem\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,eAAe,EAC7B,OACA,UAAU,eAAe,OACzB,YACA,WACA,OACA,QACA,GAAG,QACmB;CACtB,MAAM,MAAM,qBAAqB,iBAAiB;CAClD,MAAM,UAAU,IAAI,eAAe;CACnC,MAAM,UAAU,IAAI,WAAW;CAC/B,MAAM,WAAW,IAAI,YAAY;CAKjC,MAAM,WAAW,iBAAiB;EAChC,MAAM;EACN,WAAW;EACX;EACA,OAAO;EACP,gBAAgB,OAAO;GAKrB,IAAI,OAAO,MAAM;IACf,aAAa,IAAI,gBAAgB,OAAO;IACxC,aAAa,IAAI,gBAAgB,OAAO;IACxC,aAAa,IAAI,iBAAiB,QAAQ;GAC5C;GACA,IAAI,cAAc,EAAE;EACtB;EACA,gBAAgB,IAAI,iBAAiB,KAAA,IAAY,KAAA,IAAY,IAAI,iBAAiB;CACpF,CAAC;CAID,MAAM,UAAU,UAA+D;EAC7E,gBAAgB;EAChB;EACA,OAAA;GALmC;GAAO;GAAS;GAAS;EAKxD;EACJ;EACA;EACA,UAAU,KAAA;EACV,KAAK;EAEL,OAAO;EACP,cAAc;GACZ,MAAM;GACN,MAAM,IAAI;GACV;GACA;GACA,gBAAgB,KAAA;GAGhB,UAAU;GACV,MAAM,IAAI;GACV,UAAU,IAAI;GACd,gBAAgB,SAAS,OAAO;GAChC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAAyC;IAGlD,IAAI,UAAU;IACd,MAAM,cAAc,MAAM;IAC1B,qBAAqB,mBAAmB,IAAI,OAAO,OAAO,WAAW,GAAG,iBAAiB;GAC3F;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,mBAAmB,YAAY,OAAO;AACrE;AAEA,eAAe,cAAc"}