refactor(dify-ui): consolidate radio family API (#38479)

web/features/agent-v2/agent-detail/configure/components/orchestrate/knowledge/dialog.tsx

@@ -14,8 +14,7 @@ import type { DataSet, MetadataInDoc } from '@/models/datasets'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Dialog, DialogCloseButton, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { Input } from '@langgenius/dify-ui/input'
-import { RadioRoot } from '@langgenius/dify-ui/radio'
-import { RadioGroup } from '@langgenius/dify-ui/radio-group'
+import { RadioGroup, RadioItem } from '@langgenius/dify-ui/radio'
 import { Textarea } from '@langgenius/dify-ui/textarea'
 import { intersectionBy } from 'es-toolkit/compat'
 import { useAtomValue } from 'jotai'
@@ -500,17 +499,16 @@ export function AgentKnowledgeRetrievalDialog({
               }}
             >
               {queryModeOptions.map(mode => (
-                <RadioRoot<KnowledgeRetrievalQueryMode>
+                <RadioItem<KnowledgeRetrievalQueryMode>
                   key={mode}
                   value={mode}
-                  variant="unstyled"
                   nativeButton
                   render={<button type="button" className={optionCardClassName} />}
                 >
                   <span className="min-w-0 truncate">
                     {t(`agentDetail.configure.knowledgeRetrieval.dialog.query.${mode}`)}
                   </span>
-                </RadioRoot>
+                </RadioItem>
               ))}
             </RadioGroup>
             {queryMode === 'custom'

web/features/deployments/create-guide/ui/source-step.tsx

@@ -4,8 +4,7 @@ import type { GuideMethod, WorkflowSourceApp } from '@/features/deployments/crea
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
 import { Input } from '@langgenius/dify-ui/input'
-import { RadioRoot } from '@langgenius/dify-ui/radio'
-import { RadioGroup } from '@langgenius/dify-ui/radio-group'
+import { RadioGroup, RadioItem } from '@langgenius/dify-ui/radio'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { useTranslation } from 'react-i18next'
 import Uploader from '@/app/components/app/create-from-dsl-modal/uploader'
@@ -103,9 +102,10 @@ function SourceMethodCard({ value, icon, title, description, badge }: {
   badge?: string
 }) {
   return (
-    <RadioRoot<GuideMethod>
+    <RadioItem<GuideMethod>
       value={value}
-      variant="unstyled"
+      nativeButton
+      render={<button type="button" />}
       className={cn(
         `relative box-content h-[84px] w-full cursor-pointer rounded-xl border-[0.5px]
         border-components-option-card-option-border bg-components-panel-on-panel-item-bg p-3
@@ -132,7 +132,7 @@ function SourceMethodCard({ value, icon, title, description, badge }: {
           </span>
         </TitleTooltip>
       </span>
-    </RadioRoot>
+    </RadioItem>
   )
 }
 

web/features/deployments/create-guide/ui/target-step.tsx

@@ -3,8 +3,7 @@
 import type { Environment } from '@dify/contracts/enterprise/types.gen'
 import { Button } from '@langgenius/dify-ui/button'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RadioControl, RadioRoot } from '@langgenius/dify-ui/radio'
-import { RadioGroup } from '@langgenius/dify-ui/radio-group'
+import { RadioControl, RadioGroup, RadioItem } from '@langgenius/dify-ui/radio'
 import { toast } from '@langgenius/dify-ui/toast'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { useTranslation } from 'react-i18next'
@@ -119,9 +118,10 @@ function EnvironmentOptionRow({ environment }: {
   const summary = environment.description.trim() || `${t(`mode.${environment.mode}`)} · ${t(`backend.${environment.backend}`)}`
 
   return (
-    <RadioRoot<string>
+    <RadioItem<string>
       value={environment.id}
-      variant="unstyled"
+      nativeButton
+      render={<button type="button" />}
       className={cn(
         'group flex cursor-pointer items-center gap-3 rounded-xl border p-3 outline-hidden',
         'border-components-option-card-option-border bg-components-option-card-option-bg hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
@@ -138,7 +138,7 @@ function EnvironmentOptionRow({ environment }: {
           </span>
         </TitleTooltip>
       </span>
-    </RadioRoot>
+    </RadioItem>
   )
 }
 

web/features/deployments/detail/access/permissions/access-control-dialog.tsx

@@ -12,8 +12,7 @@ import {
   DialogDescription,
   DialogTitle,
 } from '@langgenius/dify-ui/dialog'
-import { RadioRoot } from '@langgenius/dify-ui/radio'
-import { RadioGroup } from '@langgenius/dify-ui/radio-group'
+import { RadioGroup, RadioItem } from '@langgenius/dify-ui/radio'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AccessMode as AppAccessMode } from '@/models/access-control'
@@ -166,9 +165,8 @@ function AccessControlItem({ type, children }: PropsWithChildren<{
   type: AppAccessMode
 }>) {
   return (
-    <RadioRoot<AppAccessMode>
+    <RadioItem<AppAccessMode>
       value={type}
-      variant="unstyled"
       render={<div />}
       className={cn(
         'cursor-pointer rounded-[10px] border-[0.5px] border-components-option-card-option-border bg-components-option-card-option-bg shadow-xs transition-colors',
@@ -179,7 +177,7 @@ function AccessControlItem({ type, children }: PropsWithChildren<{
       )}
     >
       {children}
-    </RadioRoot>
+    </RadioItem>
   )
 }