refactor: remove heroui

app/global.css

@@ -125,6 +125,11 @@
     grid-template-columns: 420px 1fr;
   }
 
+  /* Placeholder color using custom variable */
+  .placeholder-secondary::placeholder {
+    color: var(--color-text-secondary);
+  }
+
   /* Container with custom center behavior */
   .container {
     @apply mx-auto;

docs/Styling.md

@@ -10,7 +10,7 @@ Use these shared components instead of raw HTML elements:
 
 ## Modal Guidelines
 
-**IMPORTANT**: Always use our custom Modal components from `@/components/common/Modal`. Never import HeroUI modals directly. The shared wrapper applies Monarch typography, corner radius, background, blur, and z-index rules automatically.
+**IMPORTANT**: Always use our custom Modal components from `@/components/common/Modal`. The shared wrapper applies Monarch typography, corner radius, background, blur, and z-index rules automatically.
 
 All modals MUST follow consistent styling standards for typography, spacing, and structure. There are two modal patterns based on use case.
 
@@ -228,7 +228,7 @@ For section headers within modal content, use consistent styling:
 <h3 className="text-base font-normal text-primary">Section Title</h3>
 ```
 
-### Custom Modals (Non-HeroUI)
+### Custom Modals
 
 For custom modals using `framer-motion`, apply `font-zen` to the outer container:
 
@@ -409,37 +409,91 @@ Alignment: `align="start"` | `"center"` | `"end"`
 
 ## Tooltip
 
-Use `TooltipContent` from `@/components/shared/tooltip-content` for consistent tooltip styling.
+### Basic Tooltip
 
 ```tsx
+import { Tooltip } from '@/components/ui/tooltip';
+
+<Tooltip content="Tooltip text">
+  <Button>Hover me</Button>
+</Tooltip>
+
+<Tooltip content="Top tooltip" placement="top">
+  <span>Hover</span>
+</Tooltip>
+
+<Tooltip content="Delayed" delay={500}>
+  <InfoIcon />
+</Tooltip>
+```
+
+**Props:** `content`, `placement` (`top` | `bottom` | `left` | `right`), `delay` (ms), `className`
+
+### Structured Content
+
+```tsx
+import { Tooltip } from '@/components/ui/tooltip';
 import { TooltipContent } from '@/components/shared/tooltip-content';
 
-// Simple
+// Icon + title
+<Tooltip content={<TooltipContent icon={<Icon />} title="Title" />}>
+  <Button>Hover</Button>
+</Tooltip>
+
+// With details
 <Tooltip
-  classNames={{ base: 'p-0 m-0 bg-transparent shadow-sm border-none', content: 'p-0 m-0 bg-transparent shadow-sm border-none' }}
-  content={<TooltipContent title="Tooltip Title" />}
+  content={
+    <TooltipContent
+      icon={<Icon />}
+      title="Title"
+      detail="Detail text"
+      secondaryDetail="Secondary detail"
+    />
+  }
 >
-  {/* trigger */}
+  <Button>Hover</Button>
 </Tooltip>
 
-// With detail
-<TooltipContent
-  icon={<GrStatusGood />}
-  title="Tooltip Title"
-  detail="Main description"
-  secondaryDetail="Additional info"
-/>
-
 // With action link
-<TooltipContent
-  title="Token Name"
-  detail="Description"
-  actionIcon={<FiExternalLink />}
-  actionHref="https://explorer.com"
-/>
+<Tooltip
+  content={
+    <TooltipContent
+      title="Title"
+      actionIcon={<ExternalLink />}
+      actionHref="https://..."
+    />
+  }
+>
+  <Button>Hover</Button>
+</Tooltip>
 ```
 
-Always use the `classNames` configuration shown above to remove HeroUI's default styling.
+**TooltipContent Props:** `icon`, `title`, `detail`, `secondaryDetail`, `className`, `actionIcon`, `actionHref`, `onActionClick`
+
+### Primitives
+
+```tsx
+import { TooltipRoot, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
+
+<TooltipRoot delayDuration={300}>
+  <TooltipTrigger asChild>
+    <button>Hover</button>
+  </TooltipTrigger>
+  <TooltipContent side="right">
+    Custom content
+  </TooltipContent>
+</TooltipRoot>
+```
+
+### Provider
+
+```tsx
+import { TooltipProvider } from '@/components/ui/tooltip';
+
+<TooltipProvider>
+  <App />
+</TooltipProvider>
+```
 
 ### Table Component
 

package.json

@@ -20,20 +20,24 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@heroui/input": "^2.2.2",
     "@heroui/react": "^2.4.2",
-    "@heroui/system": "^2.2.2",
     "@heroui/theme": "^2.2.6",
-    "@heroui/tooltip": "^2.0.36",
     "@internationalized/date": "^3.8.2",
     "@merkl/api": "^1.7.0",
     "@morpho-org/blue-sdk": "^5.3.0",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
     "@react-aria/i18n": "^3.12.11",
     "@react-spring/web": "^9.7.3",
     "@reown/appkit": "^1.8.14",