@uniflowed/ui 0.1.0 → 0.3.0

package/drawer.js

@@ -62,15 +62,15 @@ import {
   withoutComposed,
 } from "./internal/merge-props.js";
 import {
-  SheetBody,
-  SheetClose,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetRoot,
-  SheetTitle,
-  SheetTrigger,
+  Body as SheetBody,
+  Close as SheetClose,
+  Description as SheetDescription,
+  Footer as SheetFooter,
+  Header as SheetHeader,
+  Overlay as SheetOverlay,
+  Root as SheetRoot,
+  Title as SheetTitle,
+  Trigger as SheetTrigger,
 } from "./sheet.js";
 import { useControlled } from "./internal/controlled-state.js";
 
@@ -132,7 +132,7 @@ hook useDrawer(part: string): DrawerState {
  * `onOpenChange` behave exactly as they do everywhere else in this package,
  * because `internal/controlled-state.js` is what answers here too.
  */
-export component DrawerRoot(
+component DrawerRoot(
   children: React.Node,
   defaultOpen?: boolean = false,
   defaultSnapPoint?: number = 0,
@@ -173,7 +173,7 @@ export component DrawerRoot(
 }
 
 /** What opens it, and what focus comes back to when it closes. */
-export component DrawerTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetTrigger {...forwarded(rest)} render={render}>
       {children}
@@ -182,7 +182,7 @@ export component DrawerTrigger(children: React.Node, render?: RenderProp, ...res
 }
 
 /** The backdrop. It carries the edge, the same as a sheet's. */
-export component DrawerOverlay(render?: RenderProp, ...rest: Rest) {
+component DrawerOverlay(render?: RenderProp, ...rest: Rest) {
   return <SheetOverlay {...forwarded(rest)} render={render} />;
 }
 
@@ -194,7 +194,7 @@ export component DrawerOverlay(render?: RenderProp, ...rest: Rest) {
  * no drag to provide an alternative to — and a drawer with a handle and no
  * `Drawer.Close` has a gesture that is the only way out.
  */
-export component DrawerBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerBody(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const drawer = useDrawer("Drawer.Body");
   const { bodyRef, snapIndex, snapPoints } = drawer;
   const reducedMotion = usePrefersReducedMotion();
@@ -260,7 +260,7 @@ component RequireCloseForTheDrag() {
 }
 
 /** The top of the drawer, where the handle usually goes. */
-export component DrawerHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerHeader(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetHeader {...forwarded(rest)} render={render}>
       {children}
@@ -269,7 +269,7 @@ export component DrawerHeader(children: React.Node, render?: RenderProp, ...rest
 }
 
 /** The bottom of the drawer, where the actions go. */
-export component DrawerFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerFooter(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetFooter {...forwarded(rest)} render={render}>
       {children}
@@ -278,7 +278,7 @@ export component DrawerFooter(children: React.Node, render?: RenderProp, ...rest
 }
 
 /** The drawer's accessible name. */
-export component DrawerTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerTitle(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetTitle {...forwarded(rest)} render={render}>
       {children}
@@ -287,7 +287,7 @@ export component DrawerTitle(children: React.Node, render?: RenderProp, ...rest:
 }
 
 /** What the drawer is for, announced after its name. */
-export component DrawerDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
   return (
     <SheetDescription {...forwarded(rest)} render={render}>
       {children}
@@ -301,7 +301,7 @@ export component DrawerDescription(children: React.Node, render?: RenderProp, ..
  *
  * It registers itself so `Drawer.Body` can tell whether the gesture has one.
  */
-export component DrawerClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component DrawerClose(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const drawer = useDrawer("Drawer.Close");
   const closeCountRef = drawer.closeCountRef;
 
@@ -336,11 +336,7 @@ export component DrawerClose(children: React.Node, render?: RenderProp, ...rest:
  * `label` because a slider with no accessible name is announced as "slider",
  * which is the same failure `Resizable.Handle` names.
  */
-export component DrawerHandle(
-  label?: string = "Resize the drawer",
-  render?: RenderProp,
-  ...rest: Rest
-) {
+component DrawerHandle(label?: string = "Resize the drawer", render?: RenderProp, ...rest: Rest) {
   const drawer = useDrawer("Drawer.Handle");
   const { bodyRef, close, handleCountRef, setSnapIndex, side, snapIndex, snapPoints } = drawer;
   const passed = withoutComposed(rest, [
@@ -359,17 +355,12 @@ export component DrawerHandle(
   // So `Drawer.Body` knows there is a drag to provide an alternative to. A
   // drawer with no handle has no gesture, and requiring a close button of one
   // would be this component inventing a rule WCAG did not write.
-  useEffect(
-    () => {
-      handleCountRef.current += 1;
-      return () => {
-        handleCountRef.current -= 1;
-      };
-    },
-    // The context ref object is stable; the effect registers this part's mount.
-    // uf-lint-disable-next-line react-compiler/refs
-    [handleCountRef],
-  );
+  useEffect(() => {
+    handleCountRef.current += 1;
+    return () => {
+      handleCountRef.current -= 1;
+    };
+  }, [handleCountRef]);
 
   /** Move by one snap point, or close when there is no smaller one. */
   const step = (towardsOpen: boolean) => {
@@ -502,3 +493,25 @@ const CLOSES_WITH: { readonly [Edge]: string } = {
   right: "ArrowRight",
   top: "ArrowUp",
 };
+
+/**
+ * The parts, under the names the `Drawer` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Drawer from "./drawer.js"` —
+ * so a caller writes `<Drawer.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `DrawerRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  DrawerRoot as Root,
+  DrawerTrigger as Trigger,
+  DrawerOverlay as Overlay,
+  DrawerBody as Body,
+  DrawerHandle as Handle,
+  DrawerHeader as Header,
+  DrawerFooter as Footer,
+  DrawerTitle as Title,
+  DrawerDescription as Description,
+  DrawerClose as Close,
+};

package/field.js

@@ -187,7 +187,7 @@ hook useField(part: string): FieldState {
  * caller saying "and also mark it invalid", which is what `invalid || source`
  * means and what a server-side error arriving beside a client-side one needs.
  */
-export component FieldRoot(
+component FieldRoot(
   children: React.Node,
   invalid?: boolean = false,
   required?: boolean = false,
@@ -279,7 +279,7 @@ export component FieldRoot(
  * `<label for>` naming something that is not a form control is ignored by every
  * browser, and ignored silently. The module header says more.
  */
-export component FieldLabel(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component FieldLabel(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const field = useField("Field.Label");
   // `rest` first: a caller `id` here would break the relationship the control
   // points at, and it would break it silently.
@@ -300,7 +300,7 @@ export component FieldLabel(children: React.Node, render?: RenderProp, ...rest:
  * `ref` and handlers *and* the field's attributes from one spread instead of
  * two that overwrite each other.
  */
-export component FieldControl(render: RenderProp) {
+component FieldControl(render: RenderProp) {
   const field = useField("Field.Control");
   // A group already carries the name, the description and the validity, and a
   // control repeating them makes a reader hear the error once for the set and
@@ -319,7 +319,7 @@ export component FieldControl(render: RenderProp) {
 }
 
 /** Help text, which the control points at while it is rendered. */
-export component FieldDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
+component FieldDescription(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const field = useField("Field.Description");
   const register = field.registerDescription;
   useEffect(() => {
@@ -338,7 +338,7 @@ export component FieldDescription(children: React.Node, render?: RenderProp, ...
  * `Field.Error`, this part stays in the document even while it is empty; the
  * control points at it only while the caller rendered the part.
  */
-export component FieldStatus(children?: React.Node, render?: RenderProp, ...rest: Rest) {
+component FieldStatus(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const field = useField("Field.Status");
   const register = field.registerStatus;
   useEffect(() => {
@@ -367,7 +367,7 @@ export component FieldStatus(children?: React.Node, render?: RenderProp, ...rest
  * store does not need the caller to reach back into `formState.errors` for a
  * string the source is already carrying.
  */
-export component FieldError(children?: React.Node, render?: RenderProp, ...rest: Rest) {
+component FieldError(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const field = useField("Field.Error");
   const register = field.registerError;
   useEffect(() => {
@@ -385,3 +385,21 @@ export component FieldError(children?: React.Node, render?: RenderProp, ...rest:
   });
   return render != null ? render(props) : <p {...props} />;
 }
+
+/**
+ * The parts, under the names the `Field` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as Field from "./field.js"` —
+ * so a caller writes `<Field.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `FieldRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export {
+  FieldRoot as Root,
+  FieldLabel as Label,
+  FieldControl as Control,
+  FieldDescription as Description,
+  FieldStatus as Status,
+  FieldError as Error,
+};

package/hover-card.js

@@ -88,7 +88,7 @@ hook useHoverCard(part: string): HoverCardState {
  * the time the reader has to reach the card, and a card holding links is a card
  * they are reaching for.
  */
-export component HoverCardRoot(
+component HoverCardRoot(
   children: React.Node,
   closeDelay?: number = DEFAULT_CLOSE_DELAY,
   defaultOpen?: boolean = false,
@@ -127,7 +127,7 @@ export component HoverCardRoot(
  * reachable by keyboard, and `useFocusableTrigger` refuses anything else —
  * a hover card on a `<span>` is one a keyboard reader can never see.
  */
-export component HoverCardTrigger(children?: React.Node, render?: RenderProp, ...rest: Rest) {
+component HoverCardTrigger(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const card = useHoverCard("HoverCard.Trigger");
   const { closeDelay, dismissedRef, intent, openDelay, triggerRef } = card;
   useFocusableTrigger(triggerRef, "HoverCard.Trigger");
@@ -202,7 +202,7 @@ export component HoverCardTrigger(children?: React.Node, render?: RenderProp, ..
  * because a card that took its own links away and left focus on `<body>` would
  * send the reader back to the top of the page.
  */
-export component HoverCardBody(
+component HoverCardBody(
   children: React.Node,
   align?: Align = "center",
   alignOffset?: number = 0,
@@ -332,3 +332,14 @@ export component HoverCardBody(
 
   return <div {...props} />;
 }
+
+/**
+ * The parts, under the names the `HoverCard` namespace gives them.
+ *
+ * `index.js` re-exports this module whole — `export * as HoverCard from "./hover-card.js"` —
+ * so a caller writes `<HoverCard.Root>`, and the namespace is the prefix. Each
+ * part is still *declared* as `HoverCardRoot`, so React DevTools, a component
+ * stack and an error name the part a reader can find rather than one of forty
+ * `Root`s.
+ */
+export { HoverCardRoot as Root, HoverCardTrigger as Trigger, HoverCardBody as Body };