chore: glue "Returns" to siblings

Author: avivkeller

packages/ui-components/src/Common/Signature/SignatureItem/index.module.css

@@ -14,6 +14,20 @@
     dark:bg-neutral-900/40;
 }
 
+/*
+ * A top-level return (not nested inside a `.children` group) attaches to the
+ * items above it as a full-bleed footer: it bleeds past the container padding
+ * and is separated by a divider rather than floating on its own.
+ */
+.return:not(:first-child, .children .return) {
+  @apply -mx-4
+    -mb-3
+    rounded-t-none
+    border-t
+    border-neutral-200
+    dark:border-neutral-900;
+}
+
 .children {
   @apply relative
     flex

packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx

@@ -14,10 +14,15 @@ const SignatureRoot: FC<PropsWithChildren<SignatureRootProps>> = ({
   const titleId = useId();
 
   return (
-    <section className={styles.container} aria-labelledby={titleId}>
-      <div className={styles.title} id={titleId}>
-        {title}
-      </div>
+    <section
+      className={styles.container}
+      aria-labelledby={title ? titleId : undefined}
+    >
+      {title && (
+        <div className={styles.title} id={titleId}>
+          {title}
+        </div>
+      )}
       <div className={styles.root}>{children}</div>
     </section>
   );

packages/ui-components/src/Common/Signature/index.tsx

@@ -21,7 +21,9 @@ const Signature: FC<PropsWithChildren<SignatureProps>> = ({
   title,
   children,
 }) => {
-  if (title) {
+  // A Signature without its own name or type is the grouping container, with
+  // an optional title. Everything else renders as an individual item.
+  if (!name && !type) {
     return <SignatureRoot title={title}>{children}</SignatureRoot>;
   }
 

packages/ui-components/src/Containers/FunctionSignature/index.tsx

@@ -27,32 +27,10 @@ const renderSignature = (param: SignatureDefinition, index: number) => (
   </Signature>
 );
 
-const FunctionSignature: FC<FunctionSignatureProps> = ({ title, items }) => {
-  if (title) {
-    const attributes: Array<SignatureDefinition> = [];
-    const returnTypes: Array<SignatureDefinition> = [];
-
-    for (const item of items) {
-      const target = item.kind === 'return' ? returnTypes : attributes;
-
-      target.push(item);
-    }
-
-    return (
-      <>
-        <Signature title={title}>
-          {attributes.map((param, i) => renderSignature(param, i))}
-        </Signature>
-
-        {returnTypes.length > 0 &&
-          returnTypes.map((param, i) =>
-            renderSignature(param, attributes.length + i)
-          )}
-      </>
-    );
-  }
-
-  return items.map((param, i) => renderSignature(param, i));
-};
+const FunctionSignature: FC<FunctionSignatureProps> = ({ title, items }) => (
+  <Signature title={title}>
+    {items.map((param, i) => renderSignature(param, i))}
+  </Signature>
+);
 
 export default FunctionSignature;