adds env step to shadcn (#43941)

<img width="877" height="997" alt="image"
src="https://github.com/user-attachments/assets/31ca8667-3cfc-4543-b722-fbdf9939c288"
/>

Adds a new step for shadcn/ui enabled flows that requires the user to
add environment variables

packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { MultipleCodeBlock } from './index'
+
+describe('MultipleCodeBlock', () => {
+  it('resets the active tab when the available files change in uncontrolled mode', () => {
+    const { rerender } = render(
+      <MultipleCodeBlock
+        files={[
+          {
+            name: '.env.local',
+            language: 'bash',
+            code: 'NEXT_PUBLIC_SUPABASE_URL=https://next.example',
+          },
+        ]}
+      />
+    )
+
+    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('.env.local')
+    expect(screen.getByText('NEXT_PUBLIC_SUPABASE_URL=https://next.example')).toBeVisible()
+
+    rerender(
+      <MultipleCodeBlock
+        files={[
+          {
+            name: '.env',
+            language: 'bash',
+            code: 'VITE_SUPABASE_URL=https://react.example',
+          },
+        ]}
+      />
+    )
+
+    expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('.env')
+    expect(screen.getByText('VITE_SUPABASE_URL=https://react.example')).toBeVisible()
+  })
+})

packages/ui-patterns/src/MultipleCodeBlock/index.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react'
+
 import {
   CodeBlock,
   CodeBlockLang,
@@ -102,17 +104,37 @@ export const MultipleCodeBlock = ({ files, value, onValueChange }: MultipleCodeB
   }
 
   const defaultValue = files[0]?.name ?? ''
+  const isControlled = value !== undefined
+  const [internalValue, setInternalValue] = useState(defaultValue)
 
   const trimmedFiles = files.map((file) => ({
     ...file,
     code: typeof file.code === 'string' ? file.code.trim() : file.code,
   }))
 
+  useEffect(() => {
+    if (isControlled) return
+
+    setInternalValue((currentValue) => {
+      const currentValueExists = files.some((file) => file.name === currentValue)
+      return currentValueExists ? currentValue : defaultValue
+    })
+  }, [defaultValue, files, isControlled])
+
+  const activeValue = isControlled ? value : internalValue
+
+  const handleValueChange = (nextValue: string) => {
+    if (!isControlled) {
+      setInternalValue(nextValue)
+    }
+
+    onValueChange?.(nextValue)
+  }
+
   return (
     <Tabs_Shadcn_
-      defaultValue={defaultValue}
-      value={value}
-      onValueChange={onValueChange}
+      value={activeValue}
+      onValueChange={handleValueChange}
       className="border rounded-lg gap-0 space-y-0 overflow-hidden"
     >
       <TabsList_Shadcn_ className="bg-surface-75 px-5 gap-5 overflow-x-auto border-0 border-b">