feat: migrate nextjs to rr7

packages/ui/primitives/document-flow/field-item.tsx

@@ -1,9 +1,6 @@
-'use client';
-
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Caveat } from 'next/font/google';
-
+import { FieldType } from '@prisma/client';
 import { CopyPlus, Settings2, Trash } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
@@ -22,13 +19,6 @@ import type { TDocumentFlowFormSchema } from './types';
 
 type Field = TDocumentFlowFormSchema['fields'][0];
 
-const fontCaveat = Caveat({
-  weight: ['500'],
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-caveat',
-});
-
 export type FieldItemProps = {
   field: Field;
   passive?: boolean;
@@ -185,11 +175,35 @@ export const FieldItem = ({
     () => hasFieldMetaValues('CHECKBOX', field.fieldMeta, ZCheckboxFieldMeta),
     [field.fieldMeta],
   );
+
   const radioHasValues = useMemo(
     () => hasFieldMetaValues('RADIO', field.fieldMeta, ZRadioFieldMeta),
     [field.fieldMeta],
   );
 
+  const hasCheckedValues = (fieldMeta: TFieldMetaSchema, type: FieldType) => {
+    if (!fieldMeta || (type !== FieldType.RADIO && type !== FieldType.CHECKBOX)) {
+      return false;
+    }
+
+    if (type === FieldType.RADIO) {
+      const parsed = ZRadioFieldMeta.parse(fieldMeta);
+      return parsed.values?.some((value) => value.checked) ?? false;
+    }
+
+    if (type === FieldType.CHECKBOX) {
+      const parsed = ZCheckboxFieldMeta.parse(fieldMeta);
+      return parsed.values?.some((value) => value.checked) ?? false;
+    }
+
+    return false;
+  };
+
+  const fieldHasCheckedValues = useMemo(
+    () => hasCheckedValues(field.fieldMeta, field.type),
+    [field.fieldMeta, field.type],
+  );
+
   const fixedSize = checkBoxHasValues || radioHasValues;
 
   return createPortal(
@@ -229,6 +243,21 @@ export const FieldItem = ({
         onMove?.(d.node);
       }}
     >
+      {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&
+        field.fieldMeta?.label && (
+          <div
+            className={cn(
+              'absolute -top-16 left-0 right-0 rounded-md p-2 text-center text-xs text-gray-700',
+              {
+                'bg-foreground/5 border-primary border': !fieldHasCheckedValues,
+                'bg-documenso-200 border-primary border': fieldHasCheckedValues,
+              },
+            )}
+          >
+            {field.fieldMeta.label}
+          </div>
+        )}
+
       <div
         className={cn(
           'relative flex h-full w-full items-center justify-center bg-white',
@@ -254,12 +283,7 @@ export const FieldItem = ({
           .with('CHECKBOX', () => <CheckboxField field={field} />)
           .with('RADIO', () => <RadioField field={field} />)
           .otherwise(() => (
-            <FieldIcon
-              fieldMeta={field.fieldMeta}
-              type={field.type}
-              signerEmail={field.signerEmail}
-              fontCaveatClassName={fontCaveat.className}
-            />
+            <FieldIcon fieldMeta={field.fieldMeta} type={field.type} />
           ))}
 
         {!hideRecipients && (