@uniflowed/ui 0.2.0 → 0.4.0

package/table.js

@@ -127,7 +127,7 @@ hook useTable(part: string): TableState {
  * `announceSort` is the wording of the announcement, for an application with a
  * translation table. The default is English.
  */
-export component TableRoot(
+component TableRoot(
   children: React.Node,
   sort?: Sort | null,
   defaultSort?: Sort | null = null,
@@ -225,7 +225,7 @@ export component TableRoot(
  * what a screen reader reads when a reader lands on it. A heading above the
  * table looks the same and is not the table's name.
  */
-export component TableCaption(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component TableCaption(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const table = useTable("Table.Caption");
   const register = table.registerCaption;
 
@@ -247,7 +247,7 @@ export component TableCaption(children: React.Node, render?: RenderProp, ...rest
  * It tells the root that it exists, because `aria-rowcount` and every row's
  * `aria-rowindex` count header rows and a table without one counts differently.
  */
-export component TableHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component TableHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const table = useTable("Table.Header");
   const register = table.registerHeader;
 
@@ -266,7 +266,7 @@ export component TableHeader(children: React.Node, render?: RenderProp, ...rest:
 }
 
 /** The data rows. */
-export component TableBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component TableBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { children });
   return (
     <HeaderContext.Provider value={false}>
@@ -291,7 +291,7 @@ export component TableBody(children: React.Node, render?: RenderProp, ...rest: R
  * adding them anyway is a second source of truth that can disagree with the
  * document.
  */
-export component TableRow(
+component TableRow(
   children: React.Node,
   index?: number | null = null,
   render?: RenderProp,
@@ -332,7 +332,7 @@ export component TableRow(
  * Not `"none"` on the others: eleven headers each announcing "not sorted" is
  * eleven announcements of nothing, on every pass through the table.
  */
-export component TableHead(
+component TableHead(
   children: React.Node,
   column?: string | null = null,
   render?: RenderProp,
@@ -395,7 +395,7 @@ export component TableHead(
 }
 
 /** One cell. */
-export component TableCell(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component TableCell(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { children });
   if (render != null) {
     return render(withProps(props, { role: "cell" }));
@@ -411,7 +411,7 @@ export component TableCell(children: React.Node, render?: RenderProp, ...rest: R
  * moves down the year column. A table of records usually has one and almost
  * never marks it.
  */
-export component TableRowHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component TableRowHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const props = withProps(rest, { children, scope: "row" });
   if (render != null) {
     return render(withProps(props, { role: "rowheader" }));
@@ -449,7 +449,7 @@ export component TableRowHeader(children: React.Node, render?: RenderProp, ...re
  * wants a `Checkbox` of their own, which they should write — this part exists
  * for the type of `checked`, not for the markup.
  */
-export component TableSelectAll(
+component TableSelectAll(
   checked: boolean | "mixed",
   onCheckedChange: (checked: boolean) => void,
   label?: string = "Select all rows",
@@ -482,7 +482,7 @@ export component TableSelectAll(
  * Named props rather than `...rest: Rest`, for the reason `Table.SelectAll`
  * gives above.
  */
-export component TableRowSelect(
+component TableRowSelect(
   label: string,
   checked: boolean,
   onCheckedChange: (checked: boolean) => void,
@@ -506,3 +506,25 @@ export component TableRowSelect(
 function defaultAnnouncement(column: string, direction: "ascending" | "descending"): string {
   return `Sorted by ${column}, ${direction}.`;
 }
+
+/**
+ * The parts, under the names the `Table` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Table from "./table.js"` —
+ * so a caller writes `<Table.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `TableRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  TableRoot as Root,
+  TableCaption as Caption,
+  TableHeader as Header,
+  TableBody as Body,
+  TableRow as Row,
+  TableHead as Head,
+  TableRowHeader as RowHeader,
+  TableCell as Cell,
+  TableSelectAll as SelectAll,
+  TableRowSelect as RowSelect,
+};

package/tabs.js

@@ -87,7 +87,7 @@ hook useTabs(part: string): TabsState {
  * distinction every one of these components needs: a form library owns the
  * value, and a page that just wants tabs does not.
  */
-export component TabsRoot(
+component TabsRoot(
   children: React.Node,
   defaultValue: string,
   value?: string,
@@ -145,7 +145,7 @@ export component TabsRoot(
  * tabs push themselves into as they mount answers with mount order, which stops
  * being document order the first time a tab is conditional.
  */
-export component TabsList(children: renders* TabsTab, render?: RenderProp, ...rest: Rest) {
+component TabsList(children: renders* TabsTab, render?: RenderProp, ...rest: Rest) {
   const tabs = useTabs("Tabs.List");
   const props = withProps(withoutComposed(rest, ["onKeyDown"]), {
     // A screen reader announces the axis, and it is also what tells a reader
@@ -186,7 +186,7 @@ export component TabsList(children: renders* TabsTab, render?: RenderProp, ...re
  * the section exists and is unavailable, where a native `disabled` would leave a
  * gap they cannot ask about. The keyboard steps over it either way.
  */
-export component TabsTab(
+component TabsTab(
   value: string,
   children: React.Node,
   disabled?: boolean = false,
@@ -249,12 +249,7 @@ export component TabsTab(
  * subscription rather than "the selected value equals mine", because a caller
  * may render a subset of panels, or none at all until data arrives.
  */
-export component TabsPanel(
-  value: string,
-  children: React.Node,
-  render?: RenderProp,
-  ...rest: Rest
-) {
+component TabsPanel(value: string, children: React.Node, render?: RenderProp, ...rest: Rest) {
   const tabs = useTabs("Tabs.Panel");
   const register = tabs.registerPanel;
   const selected = tabs.selected === value;
@@ -287,3 +282,14 @@ export component TabsPanel(
   }
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `Tabs` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Tabs from "./tabs.js"` —
+ * so a caller writes `<Tabs.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `TabsRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { TabsRoot as Root, TabsList as List, TabsTab as Tab, TabsPanel as Panel };

package/toast.js

@@ -349,7 +349,7 @@ const ToastPartsContext: React.Context<ToastParts | null> = createContext(null);
  * so a `<div>` where a notification belongs is a type error rather than a
  * stack of notifications a reader cannot dismiss.
  */
-export component ToastRegion(
+component ToastRegion(
   children: (notification: Notification) => renders ToastRoot,
   label?: string = "Notifications",
   limit?: number = 3,
@@ -427,7 +427,7 @@ export component ToastRegion(
  * an id that is not in the document makes a screen reader announce nothing at
  * all.
  */
-export component ToastRoot(children: React.Node, ...rest: Rest) {
+component ToastRoot(children: React.Node, ...rest: Rest) {
   const notification = useNotification("Toast.Root");
   const base = useId();
   const elementRef = useElementRef<HTMLElement>();
@@ -499,7 +499,7 @@ export component ToastRoot(children: React.Node, ...rest: Rest) {
 }
 
 /** What the notification is about, and the name of its group. */
-export component ToastTitle(children: React.Node, ...rest: Rest) {
+component ToastTitle(children: React.Node, ...rest: Rest) {
   const parts = useToastParts("Toast.Title");
   useRegistration(parts.registerTitle);
 
@@ -511,7 +511,7 @@ export component ToastTitle(children: React.Node, ...rest: Rest) {
 }
 
 /** The rest of it, and the group's description. */
-export component ToastDescription(children: React.Node, ...rest: Rest) {
+component ToastDescription(children: React.Node, ...rest: Rest) {
   const parts = useToastParts("Toast.Description");
   useRegistration(parts.registerDescription);
 
@@ -532,7 +532,7 @@ export component ToastDescription(children: React.Node, ...rest: Rest) {
  * countdown stopping while focus is inside is what makes the button reachable
  * at all; it is not a promise that four seconds was enough time to decide.
  */
-export component ToastAction(children: React.Node, ...rest: Rest) {
+component ToastAction(children: React.Node, ...rest: Rest) {
   const notification = useNotification("Toast.Action");
   const passed = withoutComposed(rest, ["onClick"]);
 
@@ -561,7 +561,7 @@ export component ToastAction(children: React.Node, ...rest: Rest) {
  * `aria-label` that says "Dismiss" over a button that says "Close" breaks the
  * speech reader who says "click Close" out loud.
  */
-export component ToastClose(children?: React.Node, label?: string = "Dismiss", ...rest: Rest) {
+component ToastClose(children?: React.Node, label?: string = "Dismiss", ...rest: Rest) {
   const notification = useNotification("Toast.Close");
   const passed = withoutComposed(rest, ["onClick"]);
 
@@ -592,3 +592,21 @@ hook useRegistration(register: (present: boolean) => void): void {
     return () => register(false);
   }, [register]);
 }
+
+/**
+ * The parts, under the names the `Toast` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Toast from "./toast.js"` —
+ * so a caller writes `<Toast.Region>`, and the namespace is the prefix. Each
+ * part is still *declared* as `ToastRegion`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Region`s.
+ */
+export {
+  ToastRegion as Region,
+  ToastRoot as Root,
+  ToastTitle as Title,
+  ToastDescription as Description,
+  ToastAction as Action,
+  ToastClose as Close,
+};

package/toggle-group.js

@@ -70,7 +70,7 @@ import {
 } from "./internal/merge-props.js";
 import { moveOnKey, useFirstItem } from "./internal/roving-focus.js";
 import type { Orientation, RovingSet } from "./internal/roving-focus.js";
-import { RadioGroupItem, RadioGroupRoot } from "./radio-group.js";
+import { Item as RadioGroupItem, Root as RadioGroupRoot } from "./radio-group.js";
 import { useControlled } from "./internal/controlled-state.js";
 
 /** Whether the set holds one answer or any number of them. */
@@ -128,7 +128,7 @@ hook useToggleGroup(part: string): ToggleGroupState {
  * Uncontrolled by default and controlled the moment `value` is passed, like
  * everything else here.
  */
-export component ToggleGroupRoot(
+component ToggleGroupRoot(
   children: renders* ToggleGroupItem,
   type?: ToggleGroupType = "multiple",
   defaultValue?: $ReadOnlyArray<string> = NOTHING,
@@ -224,7 +224,7 @@ export component ToggleGroupRoot(
  * a reader is told the set has two members when it has three and cannot ask
  * where the third went. The arrow keys step over it either way.
  */
-export component ToggleGroupItem(
+component ToggleGroupItem(
   value: string,
   children?: React.Node,
   disabled?: boolean = false,
@@ -282,3 +282,14 @@ export component ToggleGroupItem(
 
   return <button {...itemProps} type="button" />;
 }
+
+/**
+ * The parts, under the names the `ToggleGroup` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as ToggleGroup from "./toggle-group.js"` —
+ * so a caller writes `<ToggleGroup.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `ToggleGroupRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { ToggleGroupRoot as Root, ToggleGroupItem as Item };

package/tooltip.js

@@ -150,7 +150,7 @@ hook useTooltip(part: string): TooltipState {
  * Renders no element: it is a context and a clock, and a `<div>` around a
  * toolbar is the caller's business.
  */
-export component TooltipProvider(
+component TooltipProvider(
   children: React.Node,
   delayDuration?: number = DEFAULT_OPEN_DELAY,
   skipDelayDuration?: number = DEFAULT_SKIP_DELAY,
@@ -168,7 +168,7 @@ export component TooltipProvider(
  * `delayDuration`, and to 700ms when there is no provider — a tooltip on its
  * own is a complete tooltip and needs nothing around it.
  */
-export component TooltipRoot(
+component TooltipRoot(
   children: React.Node,
   closeDelay?: number = DEFAULT_CLOSE_DELAY,
   defaultOpen?: boolean = false,
@@ -243,7 +243,7 @@ export component TooltipRoot(
  * `render` function that forgets to spread something still gets a working
  * tooltip; see the module header.
  */
-export component TooltipTrigger(children?: React.Node, render?: RenderProp, ...rest: Rest) {
+component TooltipTrigger(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const tooltip = useTooltip("Tooltip.Trigger");
   const { closeDelay, dismissedRef, intent, openDelay, setOpen, triggerRef } = tooltip;
   useFocusableTrigger(triggerRef, "Tooltip.Trigger");
@@ -320,7 +320,7 @@ export component TooltipTrigger(children?: React.Node, render?: RenderProp, ...r
  * takes focus, holds no tab stop, and answers `Escape` from wherever focus
  * happens to be.
  */
-export component TooltipBody(
+component TooltipBody(
   children: React.Node,
   align?: Align = "center",
   alignOffset?: number = 0,
@@ -389,7 +389,7 @@ export component TooltipBody(
     id: `${tooltip.base}-body`,
     // React calls callback refs during commit; placement effects read it later.
     // uf-lint-disable-next-line react-compiler/refs
-    ref: composeRefs(rest.ref, (element) => {
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
       bodyRef.current = element;
     }),
     role: "tooltip",
@@ -402,3 +402,19 @@ export component TooltipBody(
   }
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `Tooltip` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Tooltip from "./tooltip.js"` —
+ * so a caller writes `<Tooltip.Provider>`, and the namespace is the prefix. Each
+ * part is still *declared* as `TooltipProvider`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Provider`s.
+ */
+export {
+  TooltipProvider as Provider,
+  TooltipRoot as Root,
+  TooltipTrigger as Trigger,
+  TooltipBody as Body,
+};