[React Doctor] Collapsed w-N h-N to size-N across 8 files

apps/e2e-app/src/App.tsx

@@ -306,7 +306,7 @@ const VariousElements = () => {
             data-testid="img-element"
           />
           <div
-            className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded"
+            className="size-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded"
             data-testid="gradient-div"
           />
         </div>
@@ -333,11 +333,11 @@ const AnimatedElements = () => {
       <h2 className="text-lg font-bold mb-4">Animated Elements</h2>
       <div className="space-y-4">
         <div
-          className="w-8 h-8 bg-blue-500 rounded-full animate-pulse"
+          className="size-8 bg-blue-500 rounded-full animate-pulse"
           data-testid="animated-pulse"
         />
-        <div className="w-8 h-8 bg-green-500 rounded animate-spin" data-testid="animated-spin" />
-        <div className="w-8 h-8 bg-red-500 rounded animate-bounce" data-testid="animated-bounce" />
+        <div className="size-8 bg-green-500 rounded animate-spin" data-testid="animated-spin" />
+        <div className="size-8 bg-red-500 rounded animate-bounce" data-testid="animated-bounce" />
       </div>
     </section>
   );
@@ -348,7 +348,7 @@ const ZeroDimensionElements = () => {
     <section className="border rounded-lg p-4" data-testid="zero-dimension-section">
       <h2 className="text-lg font-bold mb-4">Edge Case Elements</h2>
       <div className="space-y-2">
-        <div className="w-0 h-0" data-testid="zero-size-element" />
+        <div className="size-0" data-testid="zero-size-element" />
         <div className="invisible" data-testid="invisible-element">
           Invisible Element
         </div>

apps/website-v2/components/ui/chart.tsx

@@ -290,7 +290,7 @@ function ChartLegendContent({
                 <itemConfig.icon />
               ) : (
                 <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  className="size-2 shrink-0 rounded-[2px]"
                   style={{
                     backgroundColor: item.color,
                   }}

apps/website-v2/components/ui/navigation-menu.tsx

@@ -142,7 +142,7 @@ function NavigationMenuIndicator({
       )}
       {...props}
     >
-      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+      <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
     </NavigationMenuPrimitive.Indicator>
   );
 }

apps/website/components/github-button.tsx

@@ -14,7 +14,7 @@ export const GithubButton = (): ReactElement => {
         "h-auto gap-2 px-3 py-1.5 text-sm active:scale-[0.98] sm:text-base",
       )}
     >
-      <IconGithub className="h-[18px] w-[18px]" />
+      <IconGithub className="size-[18px]" />
       Star on GitHub
     </a>
   );

apps/website/components/homepage-demo.tsx

@@ -253,7 +253,7 @@ const ElementSelectContent = ({
         <ElementTag>{`<${tagName}>`}</ElementTag>
         {hasMetadata && (
           <span className="absolute left-0 top-full mt-1 z-50 hidden group-hover:block min-w-[180px] rounded-lg border border-border bg-popover px-2.5 py-2 text-xs shadow-xl">
-            <span className="absolute -top-1.5 left-3 h-3 w-3 rotate-45 border-l border-t border-border bg-popover" />
+            <span className="absolute -top-1.5 left-3 size-3 rotate-45 border-l border-t border-border bg-popover" />
             <span className="flex flex-col gap-1">
               {componentName && <TooltipRow label="Component" value={componentName} />}
               {shortPath && <TooltipRow label="File" value={shortPath} />}

apps/website/components/mobile-demo-animation.tsx

@@ -750,7 +750,7 @@ export const MobileDemoAnimation = (): ReactElement => {
                   className="flex items-center justify-between px-3 py-2"
                 >
                   <div className="flex items-center gap-2">
-                    <div className="h-5 w-5 rounded-full bg-muted/50" />
+                    <div className="size-5 rounded-full bg-muted/50" />
                     <span className="text-[11px] text-muted-foreground">{activity.label}</span>
                   </div>
                   <span className="text-[10px] text-muted-foreground">{activity.time}</span>
@@ -837,7 +837,7 @@ export const MobileDemoAnimation = (): ReactElement => {
             }}
           >
             <div
-              className="absolute left-1/2 h-0 w-0 -translate-x-1/2"
+              className="absolute left-1/2 size-0 -translate-x-1/2"
               style={{
                 top: -5,
                 borderLeft: "5px solid transparent",

apps/website/components/ui/collapsible.tsx

@@ -46,9 +46,9 @@ export const Collapsible = ({
           {header}
           <span className="ml-2 opacity-50">
             {isExpanded ? (
-              <ChevronDown className="w-3 h-3" />
+              <ChevronDown className="size-3" />
             ) : (
-              <ChevronRight className="w-3 h-3" />
+              <ChevronRight className="size-3" />
             )}
           </span>
         </div>

apps/website/components/view-docs-button.tsx

@@ -13,7 +13,7 @@ export const ViewDocsButton = (): ReactElement => (
       "hidden h-auto gap-2 px-3 py-1.5 text-sm active:scale-[0.98] sm:inline-flex sm:text-base",
     )}
   >
-    <BookOpen className="h-[15px] w-[15px]" />
+    <BookOpen className="size-[15px]" />
     View docs
   </a>
 );