@uniflowed/ui 0.2.0 → 0.4.0

package/input-otp.js

@@ -112,7 +112,7 @@ function clean(raw: string, kind: InputOtpKind, length: number): string {
  * Renders no element of its own beyond the input — see the module header. The
  * caller's props go on the input, because the input is the field.
  */
-export component InputOtpRoot(
+component InputOtpRoot(
   children: React.Node,
   defaultValue?: string = "",
   disabled?: boolean = false,
@@ -173,7 +173,7 @@ export component InputOtpRoot(
  * already been announced, and a reader told "group, 3, group, 4" is being read
  * a picture.
  */
-export component InputOtpGroup(children: React.Node, ...rest: Rest) {
+component InputOtpGroup(children: React.Node, ...rest: Rest) {
   return (
     <div {...rest} aria-hidden="true">
       {children}
@@ -188,7 +188,7 @@ export component InputOtpGroup(children: React.Node, ...rest: Rest) {
  * whether there is one in it already, so a stylesheet can draw a cursor and a
  * border without this module having an opinion about either.
  */
-export component InputOtpSlot(children?: React.Node, index: number, ...rest: Rest) {
+component InputOtpSlot(children?: React.Node, index: number, ...rest: Rest) {
   const otp = useInputOtp("InputOtp.Slot");
   const character = otp.value[index] ?? "";
   // The box the next character goes in, clamped so a full code lights its last
@@ -209,10 +209,26 @@ export component InputOtpSlot(children?: React.Node, index: number, ...rest: Res
 }
 
 /** The dash between two groups. Decoration, and it says so. */
-export component InputOtpSeparator(children?: React.Node, render?: RenderProp, ...rest: Rest) {
+component InputOtpSeparator(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { "aria-hidden": "true", children });
   if (render != null) {
     return render(props);
   }
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `InputOtp` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as InputOtp from "./input-otp.js"` —
+ * so a caller writes `<InputOtp.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `InputOtpRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  InputOtpRoot as Root,
+  InputOtpGroup as Group,
+  InputOtpSlot as Slot,
+  InputOtpSeparator as Separator,
+};

package/interactions.js

@@ -1798,7 +1798,6 @@ hook useDescription(text: string | void): string | void {
     const entry: SharedDescription = shared;
     entry.users += 1;
     // The id is state because it must render only after the shared DOM node exists.
-    // uf-lint-disable-next-line react-compiler/set-state-in-effect
     setId(entry.node.id);
     return () => {
       entry.users -= 1;

package/internal/focus.js

@@ -52,13 +52,22 @@ export const FOCUS_STOPS: string =
  * document.
  */
 export function focusable(root: HTMLElement): Array<HTMLElement> {
-  return Array.from(root.querySelectorAll(FOCUS_STOPS)).filter(
-    (element: $FlowFixMe) =>
+  const found: Array<HTMLElement> = [];
+  for (const element of root.querySelectorAll(FOCUS_STOPS)) {
+    if (
+      // Asked rather than annotated: `querySelectorAll` answers `Element`, and
+      // what focus lands on is an HTML or SVG element, both `HTMLElement` to
+      // Flow.
+      (element instanceof HTMLElement || element instanceof SVGElement) &&
       // All three hide a whole subtree, so all three are asked of the
       // ancestors; see the module header for what reading them off the element
       // alone let through.
       element.closest("[hidden]") == null &&
       element.closest("[inert]") == null &&
-      element.closest('[aria-hidden="true"]') == null,
-  );
+      element.closest('[aria-hidden="true"]') == null
+    ) {
+      found.push(element);
+    }
+  }
+  return found;
 }

package/internal/roving-focus.js

@@ -69,9 +69,18 @@ const TYPEAHEAD_WINDOW = 500;
  * cannot see.
  */
 export function itemsOf(container: HTMLElement, item: string, owner: string): Array<HTMLElement> {
-  return Array.from(container.querySelectorAll(item)).filter(
-    (element: $FlowFixMe) => element.closest(owner) === container,
-  );
+  const found: Array<HTMLElement> = [];
+  for (const element of container.querySelectorAll(item)) {
+    // An item is an HTML or SVG element, both `HTMLElement` to Flow; asked
+    // rather than annotated, because `querySelectorAll` answers `Element`.
+    if (
+      (element instanceof HTMLElement || element instanceof SVGElement) &&
+      element.closest(owner) === container
+    ) {
+      found.push(element);
+    }
+  }
+  return found;
 }
 
 /**

package/menu.js

@@ -180,7 +180,7 @@ const MenuRadioContext: React.Context<MenuRadioState | null> = createContext(nul
  * whatever layout the caller wrote, and a wrapper would put a `<div>` between
  * them that the caller then has to style around.
  */
-export component MenuRoot(
+component MenuRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   open?: boolean,
@@ -200,7 +200,7 @@ export component MenuRoot(
  * parent — and that difference is what `ArrowLeft`, `Escape` and "choosing an
  * item closes everything" are all defined in terms of.
  */
-export component MenuSub(
+component MenuSub(
   children: React.Node,
   defaultOpen?: boolean = false,
   open?: boolean,
@@ -218,7 +218,7 @@ export component MenuSub(
 }
 
 /** The button that opens the menu. */
-export component MenuTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenuTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const menu = useMenu("Menu.Trigger");
   useTriggerRegistration(menu);
   const props = withProps(withoutComposed(rest, ["onClick", "onKeyDown", "ref"]), {
@@ -269,7 +269,7 @@ export component MenuTrigger(children: React.Node, render?: RenderProp, ...rest:
  * and only the container can answer it. Items still get their own `Enter` and
  * `Space` from being buttons.
  */
-export component MenuBody(
+component MenuBody(
   children: renders* (
     | MenuItem
     | MenuCheckboxItem
@@ -323,7 +323,6 @@ export component MenuBody(
     // `open` is menu-tree metadata; no ref value is read during render.
     // uf-lint-disable-next-line react-compiler/refs
     open: menu.open,
-    // uf-lint-disable-next-line react-compiler/refs
     overlayRef: bodyRef,
     side: placement,
     sideOffset,
@@ -551,7 +550,7 @@ hook useMenuItem(
  * tree. That combination is what shadcn's copy step is usually reached for, and
  * what this package offers instead of it.
  */
-export component MenuItem(
+component MenuItem(
   children: React.Node,
   disabled?: boolean = false,
   closeOnSelect?: boolean = true,
@@ -593,7 +592,7 @@ export component MenuItem(
  * summarises other checkboxes — `checkbox.js` has it, and a menu item is a
  * command rather than a summary of a table's rows.
  */
-export component MenuCheckboxItem(
+component MenuCheckboxItem(
   children: React.Node,
   checked?: boolean,
   defaultChecked?: boolean = false,
@@ -640,7 +639,7 @@ export component MenuCheckboxItem(
  * a state the group starts in and never an event it reports, because no gesture
  * inside it unchooses an answer.
  */
-export component MenuRadioGroup(
+component MenuRadioGroup(
   children: renders* (MenuRadioItem | MenuLabel | MenuSeparator),
   defaultValue?: string | null = null,
   value?: string | null,
@@ -688,7 +687,7 @@ export component MenuRadioGroup(
  * what a sort order or a zoom level in a native menu does; `closeOnSelect` is
  * the way to say otherwise for a choice that ends the visit.
  */
-export component MenuRadioItem(
+component MenuRadioItem(
   children: React.Node,
   value: string,
   disabled?: boolean = false,
@@ -728,7 +727,7 @@ export component MenuRadioItem(
  * is why it reads the list context of the menu around it and the menu context
  * of the one below it.
  */
-export component MenuSubTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenuSubTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const menu = useMenu("Menu.SubTrigger");
   const list = useContext(MenuListContext);
   const setActiveId = list?.setActiveId;
@@ -785,7 +784,7 @@ export component MenuSubTrigger(children: React.Node, render?: RenderProp, ...re
  * moving through the menu is told the group changed. It is not focusable and
  * the arrow keys pass straight over it.
  */
-export component MenuSeparator(render?: RenderProp, ...rest: Rest) {
+component MenuSeparator(render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { "aria-orientation": "horizontal", role: "separator" });
   if (render != null) {
     return render(props);
@@ -801,7 +800,7 @@ export component MenuSeparator(render?: RenderProp, ...rest: Rest) {
  * that is not in the document makes a screen reader announce *nothing*, which
  * is worse than an unnamed group.
  */
-export component MenuGroup(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenuGroup(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const base = useId();
   const [labelled, setLabelled] = useState(false);
 
@@ -826,7 +825,7 @@ export component MenuGroup(children: React.Node, render?: RenderProp, ...rest: R
  * as ordinary content would have a reader hear the heading once as the group's
  * name and again as a stray line of text between the items.
  */
-export component MenuLabel(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenuLabel(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const group = useContext(MenuGroupContext);
   const register = group?.registerLabel;
 
@@ -844,3 +843,27 @@ export component MenuLabel(children: React.Node, render?: RenderProp, ...rest: R
   }
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `Menu` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Menu from "./menu.js"` —
+ * so a caller writes `<Menu.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `MenuRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  MenuRoot as Root,
+  MenuTrigger as Trigger,
+  MenuBody as Body,
+  MenuItem as Item,
+  MenuCheckboxItem as CheckboxItem,
+  MenuRadioGroup as RadioGroup,
+  MenuRadioItem as RadioItem,
+  MenuSeparator as Separator,
+  MenuGroup as Group,
+  MenuLabel as Label,
+  MenuSub as Sub,
+  MenuSubTrigger as SubTrigger,
+};

package/menubar.js

@@ -128,7 +128,7 @@ hook useMenubar(part: string): MenubarState {
  * a page with an application menubar and a formatting toolbar has two, and
  * "menu bar" twice tells a reader nothing about which is which.
  */
-export component MenubarRoot(children: renders* MenubarMenu, render?: RenderProp, ...rest: Rest) {
+component MenubarRoot(children: renders* MenubarMenu, render?: RenderProp, ...rest: Rest) {
   const barRef = useRef<HTMLElement | null>(null);
   const [open, setOpenValue] = useState<string | null>(null);
   const [active, setActive] = useState<string | null>(null);
@@ -208,7 +208,7 @@ export component MenubarRoot(children: renders* MenubarMenu, render?: RenderProp
  * Renders no element of its own, for the reason `Menu.Root` gives: a trigger and
  * its body are siblings in whatever layout the caller wrote.
  */
-export component MenubarMenu(children: React.Node, value: string) {
+component MenubarMenu(children: React.Node, value: string) {
   const bar = useMenubar("Menubar.Menu");
   const setOpen = bar.setOpen;
   const onOpenChange = useCallback(
@@ -237,7 +237,7 @@ export component MenubarMenu(children: React.Node, value: string) {
  * menubar — a reader is told "File, menu item, has popup, 1 of 3" — and it is
  * what makes the bar's arrow keys agree with what they were told is in it.
  */
-export component MenubarTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component MenubarTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const bar = useMenubar("Menubar.Trigger");
   const menu = useMenu("Menubar.Trigger");
   const value = useContext(MenubarMenuContext);
@@ -278,8 +278,6 @@ export component MenubarTrigger(children: React.Node, render?: RenderProp, ...re
       menu.pendingFocusRef.current = end;
       bar.setOpen(value);
     }),
-    // React calls callback refs during commit; menu focus restoration reads it later.
-    // uf-lint-disable-next-line react-compiler/refs
     ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
       // uf-lint-disable-next-line react-compiler/immutability
       menu.triggerRef.current = element;
@@ -293,3 +291,32 @@ export component MenubarTrigger(children: React.Node, render?: RenderProp, ...re
   }
   return <button {...props} type="button" />;
 }
+
+/**
+ * The parts, under the names the `Menubar` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Menubar from "./menubar.js"` —
+ * so a caller writes `<Menubar.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `MenubarRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { MenubarRoot as Root, MenubarMenu as Menu, MenubarTrigger as Trigger };
+
+/**
+ * The parts `Menubar` shares with `Menu`, re-exported so the `Menubar`
+ * namespace is complete on its own: `<Menubar.Body>` is `Menu`'s part,
+ * not a copy of it.
+ */
+export {
+  Body,
+  Item,
+  CheckboxItem,
+  RadioGroup,
+  RadioItem,
+  Separator,
+  Group,
+  Label,
+  Sub,
+  SubTrigger,
+} from "./menu.js";

package/navigation-menu.js

@@ -106,7 +106,7 @@ hook useNavigationMenuItem(part: string): NavigationMenuItemState {
  * trigger writing itself into a ref — is a registry that has to be kept in step
  * with a document that already knows the answer.
  */
-export component NavigationMenuRoot(
+component NavigationMenuRoot(
   children: renders* NavigationMenuList,
   defaultValue?: string | null = null,
   value?: string | null,
@@ -145,13 +145,13 @@ export component NavigationMenuRoot(
 }
 
 /** The list of entries. A `<ul>`, because a reader is told how many there are. */
-export component NavigationMenuList(children: renders* NavigationMenuItem, ...rest: Rest) {
+component NavigationMenuList(children: renders* NavigationMenuItem, ...rest: Rest) {
   useNavigationMenu("NavigationMenu.List");
   return <ul {...rest}>{children}</ul>;
 }
 
 /** One entry: a link on its own, or a button and the group it opens. */
-export component NavigationMenuItem(value: string, children: React.Node, ...rest: Rest) {
+component NavigationMenuItem(value: string, children: React.Node, ...rest: Rest) {
   const menu = useNavigationMenu("NavigationMenu.Item");
   const base = useId();
   const [present, setPresent] = useState(false);
@@ -179,7 +179,7 @@ export component NavigationMenuItem(value: string, children: React.Node, ...rest
 }
 
 /** The button that opens an entry's group. Not a `menuitem`; see the header. */
-export component NavigationMenuTrigger(children: React.Node, ...rest: Rest) {
+component NavigationMenuTrigger(children: React.Node, ...rest: Rest) {
   const item = useNavigationMenuItem("NavigationMenu.Trigger");
   const passed = withoutComposed(rest, ["onClick"]);
 
@@ -203,7 +203,7 @@ export component NavigationMenuTrigger(children: React.Node, ...rest: Rest) {
  * Named after its trigger, so a reader who lands in it by `Tab` is told which
  * entry they are inside rather than hearing an unnamed list of four links.
  */
-export component NavigationMenuBody(children: renders* NavigationMenuLink, ...rest: Rest) {
+component NavigationMenuBody(children: renders* NavigationMenuLink, ...rest: Rest) {
   const item = useNavigationMenuItem("NavigationMenu.Body");
   // Registered only while the group is actually in the document, which for this
   // component means only while it is open — see the module header for why a
@@ -237,7 +237,7 @@ export component NavigationMenuBody(children: renders* NavigationMenuLink, ...re
  * behind them so that coming back — or a router that never unmounted the page —
  * does not leave it hanging open.
  */
-export component NavigationMenuLink(children: React.Node, ...rest: Rest) {
+component NavigationMenuLink(children: React.Node, ...rest: Rest) {
   const item = useNavigationMenuItem("NavigationMenu.Link");
   const passed = withoutComposed(rest, ["onClick"]);
 
@@ -249,3 +249,21 @@ export component NavigationMenuLink(children: React.Node, ...rest: Rest) {
     </li>
   );
 }
+
+/**
+ * The parts, under the names the `NavigationMenu` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as NavigationMenu from "./navigation-menu.js"` —
+ * so a caller writes `<NavigationMenu.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `NavigationMenuRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  NavigationMenuRoot as Root,
+  NavigationMenuList as List,
+  NavigationMenuItem as Item,
+  NavigationMenuTrigger as Trigger,
+  NavigationMenuBody as Body,
+  NavigationMenuLink as Link,
+};

package/number-field.js

@@ -82,7 +82,7 @@ hook useNumber(): NumberState {
   return state;
 }
 
-export component NumberFieldRoot(
+component NumberFieldRoot(
   children: React.Node,
   value?: number | null,
   defaultValue?: number | null = null,
@@ -189,7 +189,7 @@ export component NumberFieldRoot(
 }
 
 /** Field.Control may render this input to supply the label, description and error ids. */
-export component NumberFieldInput(render?: RenderProp, ...rest: Rest) {
+component NumberFieldInput(render?: RenderProp, ...rest: Rest) {
   const state = useNumber();
   const props = withProps(rest, {
     type: "text",
@@ -225,11 +225,7 @@ export component NumberFieldInput(render?: RenderProp, ...rest: Rest) {
   return render != null ? render(props) : <input {...props} />;
 }
 
-export component NumberFieldIncrement(
-  children?: React.Node = "+",
-  render?: RenderProp,
-  ...rest: Rest
-) {
+component NumberFieldIncrement(children?: React.Node = "+", render?: RenderProp, ...rest: Rest) {
   const state = useNumber();
   const props = withProps(rest, {
     children,
@@ -243,11 +239,7 @@ export component NumberFieldIncrement(
   });
   return render != null ? render(props) : <button {...props} />;
 }
-export component NumberFieldDecrement(
-  children?: React.Node = "−",
-  render?: RenderProp,
-  ...rest: Rest
-) {
+component NumberFieldDecrement(children?: React.Node = "−", render?: RenderProp, ...rest: Rest) {
   const state = useNumber();
   const props = withProps(rest, {
     children,
@@ -261,3 +253,19 @@ export component NumberFieldDecrement(
   });
   return render != null ? render(props) : <button {...props} />;
 }
+
+/**
+ * The parts, under the names the `NumberField` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as NumberField from "./number-field.js"` —
+ * so a caller writes `<NumberField.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `NumberFieldRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  NumberFieldRoot as Root,
+  NumberFieldInput as Input,
+  NumberFieldIncrement as Increment,
+  NumberFieldDecrement as Decrement,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Headless, accessible React components whose composition Flow checks, part of the Unified Toolchain for Flow.",
   "type": "module",
   "license": "MIT",
@@ -19,10 +19,10 @@
     "!*.test.js"
   ],
   "dependencies": {
-    "@uniflowed/core": "0.2.0",
-    "@uniflowed/hooks": "0.2.0",
-    "@uniflowed/react": "0.2.0",
-    "@uniflowed/state": "0.2.0"
+    "@uniflowed/core": "0.4.0",
+    "@uniflowed/hooks": "0.4.0",
+    "@uniflowed/react": "0.4.0",
+    "@uniflowed/state": "0.4.0"
   },
   "peerDependencies": {
     "react": ">=19"

package/pagination.js

@@ -56,7 +56,7 @@ import { withProps, withoutComposed } from "./internal/merge-props.js";
  * links are on screen, and a component that showed five links out of
  * twenty-five would otherwise announce "page 4 of 5".
  */
-export component PaginationRoot(
+component PaginationRoot(
   children: React.Node,
   label?: string = "Pagination",
   page?: number | null = null,
@@ -91,7 +91,7 @@ export component PaginationRoot(
  * A real list, so a reader is told how many there are before walking them and
  * can skip the whole thing in one keystroke.
  */
-export component PaginationContent(
+component PaginationContent(
   children: renders* (PaginationItem | PaginationPrevious | PaginationNext),
   render?: RenderProp,
   ...rest: Rest
@@ -109,7 +109,7 @@ export component PaginationContent(
  * The `<li>` is structural and takes nothing; everything a caller passes goes
  * on the `<a>`, which is what they style and what a reader activates.
  */
-export component PaginationItem(
+component PaginationItem(
   children: React.Node,
   current?: boolean = false,
   disabled?: boolean = false,
@@ -131,7 +131,7 @@ export component PaginationItem(
  * is not something a reader can act on. Pass `label` to translate it; the
  * glyph stays whatever the caller rendered.
  */
-export component PaginationPrevious(
+component PaginationPrevious(
   children?: React.Node,
   label?: string = "Previous page",
   disabled?: boolean = false,
@@ -146,7 +146,7 @@ export component PaginationPrevious(
 }
 
 /** The link to the page after this one. See `Pagination.Previous`. */
-export component PaginationNext(
+component PaginationNext(
   children?: React.Node,
   label?: string = "Next page",
   disabled?: boolean = false,
@@ -207,3 +207,20 @@ component PageLink(
 function defaultAnnouncement(page: number, pageCount: number): string {
   return `Page ${String(page)} of ${String(pageCount)}.`;
 }
+
+/**
+ * The parts, under the names the `Pagination` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Pagination from "./pagination.js"` —
+ * so a caller writes `<Pagination.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `PaginationRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  PaginationRoot as Root,
+  PaginationContent as Content,
+  PaginationItem as Item,
+  PaginationPrevious as Previous,
+  PaginationNext as Next,
+};

package/popover.js

@@ -117,7 +117,7 @@ hook usePopover(part: string): PopoverState {
  * whatever layout the caller wrote, and a wrapper would put a `<div>` between
  * them for the caller to style around.
  */
-export component PopoverRoot(
+component PopoverRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   open?: boolean,
@@ -152,7 +152,7 @@ export component PopoverRoot(
  * trigger is not "outside" for exactly this reason — closing there and letting
  * this click reopen made the press a no-op that flickered.
  */
-export component PopoverTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component PopoverTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const popover = usePopover("Popover.Trigger");
   const passed = withoutComposed(rest, ["onClick", "ref"]);
   usePresence(popover.registerTrigger);
@@ -190,7 +190,7 @@ export component PopoverTrigger(children: React.Node, render?: RenderProp, ...re
  * separates this from a dialog, and the one a copy of `dialog.js` with the
  * `aria-modal` deleted would get wrong.
  */
-export component PopoverBody(
+component PopoverBody(
   children: React.Node,
   align?: Align = "center",
   alignOffset?: number = 0,
@@ -234,7 +234,6 @@ export component PopoverBody(
     // `open` is popover metadata; no ref value is read during render.
     // uf-lint-disable-next-line react-compiler/refs
     open: popover.open,
-    // uf-lint-disable-next-line react-compiler/refs
     overlayRef: bodyRef,
     side,
     sideOffset,
@@ -365,3 +364,14 @@ export component PopoverBody(
   }
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `Popover` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Popover from "./popover.js"` —
+ * so a caller writes `<Popover.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `PopoverRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { PopoverRoot as Root, PopoverTrigger as Trigger, PopoverBody as Body };

package/radio-group.js

@@ -96,7 +96,7 @@ import { useControlled } from "./internal/controlled-state.js";
  * have to reach it. `ToggleGroup type="single"` renders through here and is the
  * reason that matters in practice rather than in principle.
  */
-export function radioSet(orientation: Orientation): RovingSet {
+function radioSet(orientation: Orientation): RovingSet {
   return {
     item: '[role="radio"]',
     owner: '[role="radiogroup"]',
@@ -144,7 +144,7 @@ hook useRadioGroup(part: string): RadioGroupState {
  * `name` puts the answer where a form can submit it; see the hidden input
  * below.
  */
-export component RadioGroupRoot(
+component RadioGroupRoot(
   children: React.Node,
   defaultValue?: string | null = null,
   value?: string | null,
@@ -232,7 +232,7 @@ export component RadioGroupRoot(
  * `disabled` leaves a gap they cannot ask about. The arrow keys step over it
  * either way, and so does the search for the item that holds the tab stop.
  */
-export component RadioGroupItem(
+component RadioGroupItem(
   value: string,
   children?: React.Node,
   disabled?: boolean = false,
@@ -291,7 +291,7 @@ export component RadioGroupItem(
  * `[aria-checked="true"] > *`, and so the "only while chosen" part is not
  * something each caller reimplements.
  */
-export component RadioGroupIndicator(children?: React.Node, render?: RenderProp, ...rest: Rest) {
+component RadioGroupIndicator(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const item = useContext(RadioItemContext);
   if (item == null) {
     throw new Error("RadioGroup.Indicator must be rendered inside a RadioGroup.Item");
@@ -302,3 +302,14 @@ export component RadioGroupIndicator(children?: React.Node, render?: RenderProp,
   const props = withProps(rest, { "aria-hidden": "true", children });
   return render == null ? <span {...props} /> : render(props);
 }
+
+/**
+ * The parts, under the names the `RadioGroup` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as RadioGroup from "./radio-group.js"` —
+ * so a caller writes `<RadioGroup.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `RadioGroupRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { RadioGroupRoot as Root, RadioGroupItem as Item, RadioGroupIndicator as Indicator };