From c0e8e87db2915081e4548d20e5fde4ea2f07f61b Mon Sep 17 00:00:00 2001
From: xiaobin <xiaobin_chen@fzzixun.com>
Date: Mon, 1 Dec 2025 15:31:55 +0800
Subject: [PATCH] refactor(elements): unify class prop type to
 HTMLAttributes['class']

---
 packages/elements/src/artifact/ArtifactAction.vue            | 3 ++-
 packages/elements/src/artifact/ArtifactClose.vue             | 3 ++-
 packages/elements/src/image/Image.vue                        | 3 ++-
 packages/elements/src/loader/Loader.vue                      | 3 ++-
 packages/elements/src/message/MessageAvatar.vue              | 3 ++-
 packages/elements/src/plan/PlanTrigger.vue                   | 3 ++-
 packages/elements/src/prompt-input/PromptInputAttachment.vue | 3 ++-
 packages/elements/src/shimmer/Shimmer.vue                    | 4 ++--
 8 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/elements/src/artifact/ArtifactAction.vue b/packages/elements/src/artifact/ArtifactAction.vue
index a5ce01e..ac05b6c 100644
--- a/packages/elements/src/artifact/ArtifactAction.vue
+++ b/packages/elements/src/artifact/ArtifactAction.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
 import type { LucideIcon } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed } from 'vue'
 
 interface ArtifactActionProps {
-  class?: string
+  class?: HTMLAttributes['class']
   tooltip?: string
   label?: string
   variant?: ButtonVariants['variant']
diff --git a/packages/elements/src/artifact/ArtifactClose.vue b/packages/elements/src/artifact/ArtifactClose.vue
index 53f6d2a..6b2fbc3 100644
--- a/packages/elements/src/artifact/ArtifactClose.vue
+++ b/packages/elements/src/artifact/ArtifactClose.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { X } from 'lucide-vue-next'
 import { computed } from 'vue'
 
 interface ArtifactCloseProps {
-  class?: string
+  class?: HTMLAttributes['class']
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
 }
diff --git a/packages/elements/src/image/Image.vue b/packages/elements/src/image/Image.vue
index f03498b..541a9cc 100644
--- a/packages/elements/src/image/Image.vue
+++ b/packages/elements/src/image/Image.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { Experimental_GeneratedImage } from 'ai'
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { computed, useAttrs } from 'vue'
 
 interface Props extends Experimental_GeneratedImage {
-  class?: string
+  class?: HTMLAttributes['class']
   alt?: string
 }
 
diff --git a/packages/elements/src/loader/Loader.vue b/packages/elements/src/loader/Loader.vue
index 0d803e3..157aafa 100644
--- a/packages/elements/src/loader/Loader.vue
+++ b/packages/elements/src/loader/Loader.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import LoaderIcon from './LoaderIcon.vue'
 
 interface Props {
   size?: number
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/packages/elements/src/message/MessageAvatar.vue b/packages/elements/src/message/MessageAvatar.vue
index f03092a..16159a1 100644
--- a/packages/elements/src/message/MessageAvatar.vue
+++ b/packages/elements/src/message/MessageAvatar.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/shadcn-vue/components/ui/avatar'
 import { computed, useAttrs } from 'vue'
 
 interface Props {
   src: string
   name?: string
-  class?: string
+  class?: HTMLAttributes['class']
 }
 
 const props = defineProps<Props>()
diff --git a/packages/elements/src/plan/PlanTrigger.vue b/packages/elements/src/plan/PlanTrigger.vue
index 2f48d6e..c257d29 100644
--- a/packages/elements/src/plan/PlanTrigger.vue
+++ b/packages/elements/src/plan/PlanTrigger.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { ChevronsUpDownIcon } from 'lucide-vue-next'
 
 const props = defineProps<{
-  class?: string
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
diff --git a/packages/elements/src/prompt-input/PromptInputAttachment.vue b/packages/elements/src/prompt-input/PromptInputAttachment.vue
index a4e66d6..9d3b692 100644
--- a/packages/elements/src/prompt-input/PromptInputAttachment.vue
+++ b/packages/elements/src/prompt-input/PromptInputAttachment.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
 import type { AttachmentFile } from './types'
 import { Button } from '@repo/shadcn-vue/components/ui/button'
 import {
@@ -13,7 +14,7 @@ import { usePromptInput } from './context'
 
 const props = defineProps<{
   file: AttachmentFile
-  class?: string
+  class?: HTMLAttributes['class']
 }>()
 
 const { removeFile } = usePromptInput()
diff --git a/packages/elements/src/shimmer/Shimmer.vue b/packages/elements/src/shimmer/Shimmer.vue
index 89c852c..a621daf 100644
--- a/packages/elements/src/shimmer/Shimmer.vue
+++ b/packages/elements/src/shimmer/Shimmer.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, HTMLAttributes } from 'vue'
 import { cn } from '@repo/shadcn-vue/lib/utils'
 import { motion } from 'motion-v'
 import { computed, useSlots } from 'vue'
 
 export interface TextShimmerProps {
   as?: keyof HTMLElementTagNameMap
-  class?: string
+  class?: HTMLAttributes['class']
   duration?: number
   spread?: number
 }