From 7d5560cb4d3b5de9967b499b6f5414eb265e68ed Mon Sep 17 00:00:00 2001
From: melvinchia3636 <melvinchia623600@gmail.com>
Date: Fri, 26 Jun 2026 15:24:42 +0800
Subject: [PATCH] refactor(ui): replace Tooltip iconClassName with iconProps

Replace the string-only iconClassName prop on the Tooltip component
with a full iconProps object, allowing consumers to pass any Icon
prop (color, size, etc.) instead of relying on Tailwind class names.
---
 .../src/components/utilities/Tooltip/Tooltip.stories.tsx  | 4 +++-
 packages/ui/src/components/utilities/Tooltip/index.tsx    | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/utilities/Tooltip/Tooltip.stories.tsx b/packages/ui/src/components/utilities/Tooltip/Tooltip.stories.tsx
index 32f0798e6..0fca2ca14 100644
--- a/packages/ui/src/components/utilities/Tooltip/Tooltip.stories.tsx
+++ b/packages/ui/src/components/utilities/Tooltip/Tooltip.stories.tsx
@@ -143,7 +143,9 @@ export const ErrorTooltip: Story = {
       </>
     ),
     icon: 'tabler:alert-circle',
-    iconClassName: 'text-red-500',
+    iconProps: {
+      color: 'red-500'
+    },
     id: 'error-tooltip'
   },
   render: args => (
diff --git a/packages/ui/src/components/utilities/Tooltip/index.tsx b/packages/ui/src/components/utilities/Tooltip/index.tsx
index 7c7476d87..024383a35 100644
--- a/packages/ui/src/components/utilities/Tooltip/index.tsx
+++ b/packages/ui/src/components/utilities/Tooltip/index.tsx
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import { Tooltip as ReactTooltip } from 'react-tooltip'
 import tinycolor from 'tinycolor2'
 
-import { Box, Icon, Text } from '@/components/primitives'
+import { Box, Icon, type IconProps, Text } from '@/components/primitives'
 import { usePersonalization } from '@/providers'
 
 /**
@@ -12,7 +12,7 @@ import { usePersonalization } from '@/providers'
 export function Tooltip({
   id,
   icon,
-  iconClassName,
+  iconProps,
   children,
   ...tooltipProps
 }: {
@@ -21,7 +21,7 @@ export function Tooltip({
   /** The icon to display as the tooltip trigger. Should be a valid icon name from Iconify. */
   icon: string
   /** Optional additional class name(s) to apply to the icon element. */
-  iconClassName?: string
+  iconProps?: Omit<IconProps, 'icon'>
   /** The content to display inside the tooltip when triggered. */
   children: React.ReactNode
   /** Additional properties to pass to the underlying ReactTooltip component. */
@@ -31,7 +31,7 @@ export function Tooltip({
   return (
     <>
       <span data-tooltip-id={`tooltip-${_.kebabCase(id)}`}>
-        <Icon className={iconClassName ?? ''} color="muted" icon={icon} />
+        <Icon color="muted" icon={icon} {...iconProps} />
       </span>
       <Box
         asChild