@uniflowed/ui 0.2.0 → 0.4.0

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 };