chore: upgrade @ciphera-net/ui to v0.0.18 and refactor icon imports across components

components/dashboard/Chart.tsx

@@ -14,7 +14,7 @@ import {
 } from 'recharts'
 import type { TooltipProps } from 'recharts'
 import { formatNumber, formatDuration } from '@/lib/utils/format'
-import { ArrowTopRightIcon, ArrowBottomRightIcon, DownloadIcon, BarChartIcon } from '@radix-ui/react-icons'
+import { ArrowUpRightIcon, ArrowDownRightIcon, DownloadIcon, BarChartIcon } from '@ciphera-net/ui'
 import { Button } from '@ciphera-net/ui'
 import { Checkbox } from '@ciphera-net/ui'
 
@@ -319,9 +319,9 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
                       : 'text-neutral-500'
                 }`}>
                   {(item.invertTrend ? -item.trend : item.trend) > 0 ? (
-                     <ArrowTopRightIcon className="w-3 h-3 mr-0.5" />
+                     <ArrowUpRightIcon className="w-3 h-3 mr-0.5" />
                   ) : (item.invertTrend ? -item.trend : item.trend) < 0 ? (
-                     <ArrowBottomRightIcon className="w-3 h-3 mr-0.5" />
+                     <ArrowDownRightIcon className="w-3 h-3 mr-0.5" />
                   ) : null}
                   {Math.abs(item.trend)}%
                 </span>

components/dashboard/PerformanceStats.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { motion } from 'framer-motion'
-import { ChevronDownIcon } from '@radix-ui/react-icons'
+import { ChevronDownIcon } from '@ciphera-net/ui'
 import { PerformanceStats as Stats, PerformanceByPageStat, getPerformanceByPage } from '@/lib/api/stats'
 import { Select } from '@ciphera-net/ui'
 

components/settings/OrganizationSettings.tsx

@@ -19,14 +19,14 @@ import {
 import { toast } from 'sonner'
 import { motion, AnimatePresence } from 'framer-motion'
 import { 
-  ExclamationTriangleIcon, 
+  AlertTriangleIcon, 
   PlusIcon, 
-  CubeIcon, 
-  PersonIcon,
+  BoxIcon, 
+  UserIcon,
   CheckIcon,
-  Cross2Icon,
+  XIcon,
   CopyIcon
-} from '@radix-ui/react-icons'
+} from '@ciphera-net/ui'
 // @ts-ignore
 import { Button, Input } from '@ciphera-net/ui'
 
@@ -198,7 +198,7 @@ export default function OrganizationSettings() {
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
             }`}
           >
-            <CubeIcon className="w-5 h-5" />
+            <BoxIcon className="w-5 h-5" />
             General
           </button>
           <button
@@ -209,7 +209,7 @@ export default function OrganizationSettings() {
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
             }`}
           >
-            <PersonIcon className="w-5 h-5" />
+            <UserIcon className="w-5 h-5" />
             Members
           </button>
         </nav>
@@ -462,7 +462,7 @@ export default function OrganizationSettings() {
               <div className="flex justify-between items-center mb-4">
                 <div className="flex items-center gap-3 text-red-600">
                   <div className="h-10 w-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center shrink-0">
-                    <ExclamationTriangleIcon className="h-5 w-5" />
+                    <AlertTriangleIcon className="h-5 w-5" />
                   </div>
                   <h3 className="text-lg font-semibold">Delete Organization?</h3>
                 </div>
@@ -473,7 +473,7 @@ export default function OrganizationSettings() {
                   }}
                   className="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-white"
                 >
-                  <Cross2Icon className="w-5 h-5" />
+                  <XIcon className="w-5 h-5" />
                 </button>
               </div>
               

components/sites/SiteList.tsx

@@ -6,7 +6,7 @@ import { listSites, deleteSite, type Site } from '@/lib/api/sites'
 import { toast } from 'sonner'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
-import { BarChartIcon } from '@radix-ui/react-icons'
+import { BarChartIcon } from '@ciphera-net/ui'
 
 export default function SiteList() {
   const { user } = useAuth()

components/sites/VerificationModal.tsx

@@ -4,12 +4,12 @@ import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { motion, AnimatePresence } from 'framer-motion'
 import { 
-  Cross2Icon, 
+  XIcon, 
   ExternalLinkIcon, 
-  CheckCircledIcon, 
-  ExclamationTriangleIcon,
-  LightningBoltIcon 
-} from '@radix-ui/react-icons'
+  CheckCircleIcon, 
+  AlertTriangleIcon,
+  LightningIcon 
+} from '@ciphera-net/ui'
 import { Site } from '@/lib/api/sites'
 import { getRealtime } from '@/lib/api/stats'
 import { toast } from 'sonner'
@@ -111,7 +111,7 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                   onClick={onClose}
                   className="p-1 rounded-lg text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
                 >
-                  <Cross2Icon className="w-5 h-5" />
+                  <XIcon className="w-5 h-5" />
                 </button>
               </div>
 
@@ -121,7 +121,7 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                   <div className="space-y-4">
                     <div className="p-4 rounded-xl bg-brand-orange/5 border border-brand-orange/10 flex gap-4">
                       <div className="p-2 bg-brand-orange/10 rounded-lg h-fit text-brand-orange">
-                        <LightningBoltIcon className="w-5 h-5" />
+                        <LightningIcon className="w-5 h-5" />
                       </div>
                       <div className="space-y-1">
                         <h4 className="font-medium text-brand-orange">How this works</h4>
@@ -161,7 +161,7 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                 {status === 'success' && (
                   <div className="flex flex-col items-center justify-center py-6 space-y-6">
                     <div className="w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full flex items-center justify-center text-green-600 dark:text-green-400">
-                      <CheckCircledIcon className="w-8 h-8" />
+                      <CheckCircleIcon className="w-8 h-8" />
                     </div>
                     <div className="text-center space-y-1">
                       <h4 className="text-xl font-bold text-neutral-900 dark:text-white">
@@ -184,7 +184,7 @@ export default function VerificationModal({ isOpen, onClose, site }: Verificatio
                   <div className="space-y-6">
                     <div className="flex flex-col items-center justify-center space-y-2 text-center">
                       <div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
-                        <ExclamationTriangleIcon className="w-6 h-6" />
+                        <AlertTriangleIcon className="w-6 h-6" />
                       </div>
                       <h4 className="font-medium text-red-600 dark:text-red-400">
                         Connection Timed Out