@zhin.js/console 1.0.21 → 1.0.23

package/client/src/components/PluginConfigForm/NestedFieldRenderer.tsx

@@ -1,10 +1,12 @@
 /**
- * 嵌套字段渲染器
- * 用于渲染数组项、元组项等嵌套字段
+ * Nested field renderer for array items, tuple slots, etc.
  */
 
-import { Flex, Box, Text, TextField, TextArea, Switch, Card } from '@radix-ui/themes'
 import type { SchemaField } from './types.js'
+import { Input } from '../ui/input'
+import { Textarea } from '../ui/textarea'
+import { Switch } from '../ui/switch'
+import { Card } from '../ui/card'
 
 interface NestedFieldRendererProps {
   fieldName: string
@@ -17,78 +19,56 @@ export function NestedFieldRenderer({ field, value, onChange }: NestedFieldRende
   switch (field.type) {
     case 'string':
       return (
-        <TextField.Root
-          size="1"
-          value={value || ''}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder={field.description || '请输入'}
+        <Input
+          value={value || ''} onChange={(e) => onChange(e.target.value)}
+          placeholder={field.description || '请输入'} className="h-8 text-sm"
         />
       )
-    
+
     case 'number':
     case 'integer':
       return (
-        <TextField.Root
-          size="1"
-          type="number"
-          value={value?.toString() || ''}
+        <Input
+          type="number" value={value?.toString() || ''}
           onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
           placeholder={field.description || '请输入数字'}
-          min={field.min}
-          max={field.max}
+          min={field.min} max={field.max} className="h-8 text-sm"
         />
       )
-    
+
     case 'boolean':
       return (
-        <Flex align="center" gap="2">
-          <Switch
-            checked={value === true}
-            onCheckedChange={onChange}
-          />
-          <Text size="2" color={value ? 'green' : 'gray'}>
+        <div className="flex items-center gap-2">
+          <Switch checked={value === true} onCheckedChange={onChange} />
+          <span className={`text-sm ${value ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground'}`}>
             {value ? '已启用' : '已禁用'}
-          </Text>
-        </Flex>
+          </span>
+        </div>
       )
-    
+
     case 'object': {
       const objectFields = field.dict || field.properties || {}
       return (
-        <Card size="1">
-          <Flex direction="column" gap="2" p="2">
-            {Object.entries(objectFields).map(([key, nestedField]: [string, any]) => (
-              <Box key={key}>
-                <Text size="1" weight="bold">{key}</Text>
-                <NestedFieldRenderer
-                  fieldName={key}
-                  field={nestedField}
-                  value={value?.[key]}
-                  onChange={(val) => {
-                    onChange({ ...value, [key]: val })
-                  }}
-                />
-              </Box>
-            ))}
-          </Flex>
+        <Card className="p-2 space-y-2">
+          {Object.entries(objectFields).map(([key, nestedField]: [string, any]) => (
+            <div key={key} className="space-y-1">
+              <span className="text-xs font-semibold">{key}</span>
+              <NestedFieldRenderer
+                fieldName={key} field={nestedField} value={value?.[key]}
+                onChange={(val) => onChange({ ...value, [key]: val })}
+              />
+            </div>
+          ))}
         </Card>
       )
     }
-    
+
     default:
       return (
-        <TextArea
-          size="1"
+        <Textarea
           value={typeof value === 'object' ? JSON.stringify(value, null, 2) : value || ''}
-          onChange={(e) => {
-            try {
-              onChange(JSON.parse(e.target.value))
-            } catch {
-              onChange(e.target.value)
-            }
-          }}
-          rows={3}
-          className="font-mono text-xs"
+          onChange={(e) => { try { onChange(JSON.parse(e.target.value)) } catch { onChange(e.target.value) } }}
+          rows={3} className="font-mono text-xs"
         />
       )
   }

package/client/src/components/PluginConfigForm/index.tsx

@@ -1,57 +1,36 @@
 /**
- * PluginConfigForm 主组件
- * 插件配置表单 - 基于 Schema 自动生成
- * 改为折叠面板形式，使用 WebSocket 传递配置
+ * PluginConfigForm - Plugin configuration form with accordion
  */
 
 import { useState, useEffect } from 'react'
-import { 
-  Flex, 
-  Box, 
-  Text, 
-  Button, 
-  Spinner,
-  Callout,
-  Separator,
-  Badge,
-  ScrollArea,
-  Card
-} from '@radix-ui/themes'
-import { Accordion } from 'radix-ui'
 import { useConfig } from '@zhin.js/client'
-import type { PluginConfigFormProps, SchemaField, Schema } from './types.js'
-import { Settings, ChevronDown, CheckCircle, AlertCircle, X, Save } from 'lucide-react'
+import type { PluginConfigFormProps, SchemaField } from './types.js'
+import { Settings, ChevronDown, CheckCircle, AlertCircle, X, Save, Loader2 } from 'lucide-react'
 import { FieldRenderer, isComplexField } from './FieldRenderer.js'
 import { NestedFieldRenderer } from './NestedFieldRenderer.js'
+import { Card } from '../ui/card'
+import { Badge } from '../ui/badge'
+import { Button } from '../ui/button'
+import { Alert, AlertDescription } from '../ui/alert'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../ui/accordion'
 
 export function PluginConfigForm({ pluginName, onSuccess }: Omit<PluginConfigFormProps, 'schema' | 'initialConfig'>) {
   const [localConfig, setLocalConfig] = useState<Record<string, any>>({})
   const [successMessage, setSuccessMessage] = useState<string | null>(null)
   const [isExpanded, setIsExpanded] = useState<string | undefined>(undefined)
 
-  // 使用 WebSocket 配置管理
   const { config, schema, loading, error, connected, setConfig } = useConfig(pluginName)
-  // 当远程配置改变时更新本地配置
+
   useEffect(() => {
-    if (config) {
-      setLocalConfig(config)
-    }
+    if (config) setLocalConfig(config)
   }, [config])
 
   const handleSave = async () => {
-    if (!connected) {
-      setSuccessMessage(null)
-      return
-    }
-
+    if (!connected) return
     try {
       await setConfig(localConfig)
       setSuccessMessage('配置已保存成功')
-      setTimeout(() => {
-        setIsExpanded(undefined) // 收起面板
-        onSuccess?.()
-        setSuccessMessage(null)
-      }, 1500)
+      setTimeout(() => { setIsExpanded(undefined); onSuccess?.(); setSuccessMessage(null) }, 1500)
     } catch (err) {
       console.error('保存配置失败:', err)
     }
@@ -64,10 +43,7 @@ export function PluginConfigForm({ pluginName, onSuccess }: Omit<PluginConfigFor
   const handleNestedFieldChange = (parentPath: string, childKey: string, value: any) => {
     setLocalConfig(prev => ({
       ...prev,
-      [parentPath]: {
-        ...(prev[parentPath] || {}),
-        [childKey]: value
-      }
+      [parentPath]: { ...(prev[parentPath] || {}), [childKey]: value }
     }))
   }
 
@@ -80,8 +56,7 @@ export function PluginConfigForm({ pluginName, onSuccess }: Omit<PluginConfigFor
   }
 
   const renderField = (fieldName: string, field: SchemaField, parentPath?: string): React.ReactElement => {
-    const fullPath = parentPath ? `${parentPath}.${fieldName}` : fieldName
-    const value = parentPath 
+    const value = parentPath
       ? localConfig[parentPath]?.[fieldName] ?? field.default
       : localConfig[fieldName] ?? field.default
 
@@ -91,148 +66,71 @@ export function PluginConfigForm({ pluginName, onSuccess }: Omit<PluginConfigFor
 
     return (
       <FieldRenderer
-        fieldName={fieldName}
-        field={field}
-        value={value}
-        onChange={onChange}
-        parentPath={parentPath}
-        onNestedChange={handleNestedFieldChange}
-        onArrayItemChange={handleArrayItemChange}
-        renderField={renderField}
-        renderNestedField={(fn, f, v, oc) => (
-          <NestedFieldRenderer fieldName={fn} field={f} value={v} onChange={oc} />
-        )}
+        fieldName={fieldName} field={field} value={value} onChange={onChange}
+        parentPath={parentPath} onNestedChange={handleNestedFieldChange}
+        onArrayItemChange={handleArrayItemChange} renderField={renderField}
+        renderNestedField={(fn, f, v, oc) => <NestedFieldRenderer fieldName={fn} field={f} value={v} onChange={oc} />}
       />
     )
   }
 
   const fields = schema?.properties || schema?.dict || {}
-  
-  if (!schema || !fields || Object.keys(fields).length === 0) {
-    return null // 没有配置则不显示
-  }
+  if (!schema || !fields || Object.keys(fields).length === 0) return null
 
   return (
-    <Card size="2" className="mt-4">
-      <Accordion.Root 
-        type="single" 
-        collapsible 
-        value={isExpanded}
-        onValueChange={setIsExpanded}
-      >
-        <Accordion.Item value="config" className="border-none">
-          <Accordion.Header>
-            <Accordion.Trigger className="w-full group">
-              <Flex 
-                justify="between" 
-                align="center" 
-                className="w-full p-3 hover:bg-gray-50 dark:hover:bg-gray-900/50 rounded-lg transition-colors"
-              >
-                <Flex align="center" gap="2">
-                  <Settings className="w-5 h-5 text-blue-600 dark:text-blue-400" />
-                  <Text size="3" weight="bold">插件配置</Text>
-                  <Badge size="1" color="gray" variant="soft">
-                    {Object.keys(fields).length} 项
-                  </Badge>
-                </Flex>
-                <ChevronDown 
-                  className="w-5 h-5 text-gray-500 transition-transform duration-200 group-data-[state=open]:rotate-180" 
-                />
-              </Flex>
-            </Accordion.Trigger>
-          </Accordion.Header>
-          
-          <Accordion.Content className="overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up">
-            <Box className="pt-2 pb-4">
-              {/* 成功提示 */}
-              {successMessage && (
-                <div className="mb-3 animate-in fade-in slide-in-from-top-2 duration-300">
-                  <Callout.Root color="green" size="1" className="shadow-sm">
-                    <Callout.Icon><CheckCircle /></Callout.Icon>
-                    <Callout.Text className="font-medium">{successMessage}</Callout.Text>
-                  </Callout.Root>
-                </div>
-              )}
-
-              {/* 错误提示 */}
-              {error && (
-                <div className="mb-3 animate-in fade-in slide-in-from-top-2 duration-300">
-                  <Callout.Root color="red" size="1" className="shadow-sm">
-                    <Callout.Icon><AlertCircle /></Callout.Icon>
-                    <Callout.Text className="font-medium">{error}</Callout.Text>
-                  </Callout.Root>
-                </div>
-              )}
-
-              {/* 配置表单 */}
-              <Flex direction="column" gap="3">
-                {Object.entries(fields).map(([fieldName, field]) => {
-                  const schemaField = field as SchemaField
-                  return (
-                    <div 
-                      key={fieldName} 
-                      className="group p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors border border-gray-200 dark:border-gray-800"
-                    >
-                      <Flex direction="column" gap="2">
-                        <Flex align="center" gap="1">
-                          <Text size="2" weight="bold" className="text-gray-900 dark:text-gray-100">
-                            {schemaField.key || fieldName}
-                          </Text>
-                          {schemaField.required && (
-                            <Text size="2" weight="bold" color="red" className="leading-none">
-                              *
-                            </Text>
-                          )}
-                        </Flex>
-                        {schemaField.description && (
-                          <Text size="1" color="gray" className="leading-relaxed">
-                            {schemaField.description}
-                          </Text>
-                        )}
-                        <div className="mt-1">
-                          {renderField(schemaField.key || fieldName, schemaField)}
-                        </div>
-                      </Flex>
+    <Card className="mt-4">
+      <Accordion type="single" collapsible value={isExpanded} onValueChange={setIsExpanded}>
+        <AccordionItem value="config" className="border-none">
+          <AccordionTrigger className="px-4 hover:no-underline">
+            <div className="flex items-center gap-2">
+              <Settings className="w-4 h-4" />
+              <span className="font-semibold">插件配置</span>
+              <Badge variant="secondary">{Object.keys(fields).length} 项</Badge>
+            </div>
+          </AccordionTrigger>
+          <AccordionContent className="px-4 pb-4">
+            {successMessage && (
+              <Alert variant="success" className="mb-3">
+                <CheckCircle className="h-4 w-4" />
+                <AlertDescription>{successMessage}</AlertDescription>
+              </Alert>
+            )}
+            {error && (
+              <Alert variant="destructive" className="mb-3">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <div className="space-y-3">
+              {Object.entries(fields).map(([fieldName, field]) => {
+                const schemaField = field as SchemaField
+                return (
+                  <div key={fieldName} className="p-3 rounded-lg bg-muted/50 border space-y-2">
+                    <div className="flex items-center gap-1">
+                      <span className="text-sm font-semibold">{schemaField.key || fieldName}</span>
+                      {schemaField.required && <span className="text-destructive font-bold">*</span>}
                     </div>
-                  )
-                })}
-              </Flex>
-
-              {/* 操作按钮 */}
-              <Flex gap="2" justify="end" className="mt-4 pt-3 border-t border-gray-200 dark:border-gray-800">
-                <Button 
-                  size="2" 
-                  variant="soft" 
-                  onClick={() => setIsExpanded(undefined)} 
-                  disabled={loading}
-                  className="hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
-                >
-                  <X className="w-4 h-4" />
-                  取消
-                </Button>
-                <Button 
-                  size="2" 
-                  onClick={handleSave} 
-                  disabled={loading}
-                  className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white transition-colors shadow-sm"
-                >
-                  {loading ? (
-                    <>
-                      <Spinner />
-                      <span>保存中...</span>
-                    </>
-                  ) : (
-                    <>
-                      <Save className="w-4 h-4" />
-                      <span>保存配置</span>
-                    </>
-                  )}
-                </Button>
-              </Flex>
-            </Box>
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
+                    {schemaField.description && (
+                      <p className="text-xs text-muted-foreground">{schemaField.description}</p>
+                    )}
+                    <div className="mt-1">{renderField(schemaField.key || fieldName, schemaField)}</div>
+                  </div>
+                )
+              })}
+            </div>
+
+            <div className="flex gap-2 justify-end mt-4 pt-3 border-t">
+              <Button variant="outline" size="sm" onClick={() => setIsExpanded(undefined)} disabled={loading}>
+                <X className="w-4 h-4 mr-1" /> 取消
+              </Button>
+              <Button size="sm" onClick={handleSave} disabled={loading}>
+                {loading ? <><Loader2 className="w-4 h-4 mr-1 animate-spin" />保存中...</> : <><Save className="w-4 h-4 mr-1" />保存配置</>}
+              </Button>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </Card>
   )
 }

package/client/src/components/ui/accordion.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+import { cn } from "@zhin.js/client"
+import { ChevronDown } from "lucide-react"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = "AccordionTrigger"
+
+const AccordionContent = React.forwardRef<
+  React.ComponentRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = "AccordionContent"
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/client/src/components/ui/alert.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@zhin.js/client"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        success:
+          "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-400 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-400",
+        warning:
+          "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950/50 dark:text-amber-400 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-400",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/client/src/components/ui/avatar.tsx

@@ -0,0 +1,41 @@
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+import { cn } from "@zhin.js/client"
+
+const Avatar = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+))
+Avatar.displayName = "Avatar"
+
+const AvatarImage = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = "AvatarImage"
+
+const AvatarFallback = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = "AvatarFallback"
+
+export { Avatar, AvatarImage, AvatarFallback }

package/client/src/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@zhin.js/client"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow",
+        outline: "text-foreground",
+        success: "border-transparent bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
+        warning: "border-transparent bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

package/client/src/components/ui/button.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@zhin.js/client"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }