fix(react-doctor): migrate components to React 19 APIs

apps/registry/registry/default/accordion/accordion.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
+import { createContext, use, useCallback, useMemo, useState } from "react";
 
 import type { ReactNode } from "react";
 
@@ -22,7 +16,7 @@ type AccordionContextValue = {
 const AccordionContext = createContext<AccordionContextValue | null>(null);
 
 function useAccordionContext(): AccordionContextValue {
-  const context = useContext(AccordionContext);
+  const context = use(AccordionContext);
   if (!context) {
     throw new Error("AccordionItem must be used within an Accordion");
   }

apps/registry/registry/default/activity-heatmap/activity-heatmap.tsx

@@ -204,40 +204,33 @@ function HeatmapGrid({
   );
 }
 
-export const ActivityHeatmap = React.forwardRef<
-  HTMLDivElement,
-  ActivityHeatmapProps
->(
-  (
-    {
-      className,
-      data,
-      description,
-      endDate = new Date(),
-      title = "Activity heatmap",
-      weeks = 12,
-      ...props
-    },
-    ref,
-  ) => {
-    const normalizedEndDate = normalizeDate(endDate);
-    const gridData = getGridData(data, normalizedEndDate, weeks);
-
-    return (
-      <div className={cn("space-y-4", className)} ref={ref} {...props}>
-        <div className="space-y-1">
-          <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
-          {description ? (
-            <p className="text-sm text-muted-foreground">{description}</p>
-          ) : null}
-        </div>
+export const ActivityHeatmap = ({
+  className,
+  data,
+  description,
+  endDate = new Date(),
+  ref,
+  title = "Activity heatmap",
+  weeks = 12,
+  ...props
+}: ActivityHeatmapProps & React.RefAttributes<HTMLDivElement>) => {
+  const normalizedEndDate = normalizeDate(endDate);
+  const gridData = getGridData(data, normalizedEndDate, weeks);
 
-        <div className="overflow-x-auto rounded-lg border bg-card p-4 shadow-sm">
-          <HeatmapGrid gridData={gridData} weeks={weeks} />
-        </div>
+  return (
+    <div className={cn("space-y-4", className)} ref={ref} {...props}>
+      <div className="space-y-1">
+        <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
+        {description ? (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+
+      <div className="overflow-x-auto rounded-lg border bg-card p-4 shadow-sm">
+        <HeatmapGrid gridData={gridData} weeks={weeks} />
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 ActivityHeatmap.displayName = "ActivityHeatmap";

apps/registry/registry/default/activity-log/activity-log.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 
 import { ArrowRight, ChevronLeft, ChevronRight } from "lucide-react";
 
@@ -294,63 +294,59 @@ function ActivityLogBody({
   );
 }
 
-const ActivityLog = forwardRef<HTMLDivElement, ActivityLogProps>(
-  (
-    {
-      className,
-      defaultPage = 1,
-      description,
-      emptyMessage = "No activity recorded yet.",
-      items,
-      onPageChange,
-      page,
-      pageSize = 5,
-      title = "Activity log",
-      ...props
-    },
-    ref,
-  ) => {
-    const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
-    const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
-    const currentPage = Math.min(
-      Math.max(page ?? uncontrolledPage, 1),
-      totalPages,
-    );
-    const pageNumbers = useMemo(
-      () => buildPageNumbers(currentPage, totalPages),
-      [currentPage, totalPages],
-    );
+const ActivityLog = ({
+  className,
+  defaultPage = 1,
+  description,
+  emptyMessage = "No activity recorded yet.",
+  items,
+  onPageChange,
+  page,
+  pageSize = 5,
+  ref,
+  title = "Activity log",
+  ...props
+}: ActivityLogProps & React.RefAttributes<HTMLDivElement>) => {
+  const totalPages = Math.max(1, Math.ceil(items.length / pageSize));
+  const [uncontrolledPage, setUncontrolledPage] = useState(defaultPage);
+  const currentPage = Math.min(
+    Math.max(page ?? uncontrolledPage, 1),
+    totalPages,
+  );
+  const pageNumbers = useMemo(
+    () => buildPageNumbers(currentPage, totalPages),
+    [currentPage, totalPages],
+  );
 
-    function handlePageChange(nextPage: number) {
-      if (page === undefined) {
-        setUncontrolledPage(nextPage);
-      }
-      onPageChange?.(nextPage);
+  function handlePageChange(nextPage: number) {
+    if (page === undefined) {
+      setUncontrolledPage(nextPage);
     }
+    onPageChange?.(nextPage);
+  }
 
-    return (
-      <Card className={cn("w-full", className)} ref={ref} {...props}>
-        <ActivityLogHeader
+  return (
+    <Card className={cn("w-full", className)} ref={ref} {...props}>
+      <ActivityLogHeader
+        currentPage={currentPage}
+        description={description}
+        title={title}
+        totalPages={totalPages}
+      />
+      <CardContent className="space-y-4">
+        <ActivityLogBody
           currentPage={currentPage}
-          description={description}
-          title={title}
+          emptyMessage={emptyMessage}
+          items={items}
+          onPageChange={handlePageChange}
+          pageNumbers={pageNumbers}
+          pageSize={pageSize}
           totalPages={totalPages}
         />
-        <CardContent className="space-y-4">
-          <ActivityLogBody
-            currentPage={currentPage}
-            emptyMessage={emptyMessage}
-            items={items}
-            onPageChange={handlePageChange}
-            pageNumbers={pageNumbers}
-            pageSize={pageSize}
-            totalPages={totalPages}
-          />
-        </CardContent>
-      </Card>
-    );
-  },
-);
+      </CardContent>
+    </Card>
+  );
+};
 
 ActivityLog.displayName = "ActivityLog";