From 5857a2ea154d9386b564a9f7b3b8787cd90cda39 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 24 Jan 2026 12:50:43 +0100
Subject: [PATCH] chore: upgrade @ciphera-net/ui to v0.0.18 and refactor icon
 imports across components

---
 app/page.tsx                                 |  6 +++---
 app/share/[id]/page.tsx                      |  6 +++---
 app/sites/[id]/settings/page.tsx             | 14 +++++++-------
 components/dashboard/Chart.tsx               |  6 +++---
 components/dashboard/PerformanceStats.tsx    |  2 +-
 components/settings/OrganizationSettings.tsx | 18 +++++++++---------
 components/sites/SiteList.tsx                |  2 +-
 components/sites/VerificationModal.tsx       | 18 +++++++++---------
 package-lock.json                            |  9 ++++-----
 package.json                                 |  3 +--
 10 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index b7d5892..b75e50f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -6,7 +6,7 @@ import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
 import { LoadingOverlay } from '@ciphera-net/ui'
 import SiteList from '@/components/sites/SiteList'
 import { Button } from '@ciphera-net/ui'
-import { BarChartIcon, LockClosedIcon, LightningBoltIcon } from '@radix-ui/react-icons'
+import { BarChartIcon, LockIcon, LightningIcon } from '@ciphera-net/ui'
 
 export default function HomePage() {
   const { user, loading } = useAuth()
@@ -58,7 +58,7 @@ export default function HomePage() {
           <div className="grid md:grid-cols-3 gap-8 pt-16 text-left">
             <div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
               <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
-                <LockClosedIcon className="w-6 h-6" />
+                <LockIcon className="w-6 h-6" />
               </div>
               <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Privacy First</h3>
               <p className="text-neutral-600 dark:text-neutral-400">
@@ -76,7 +76,7 @@ export default function HomePage() {
             </div>
             <div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
               <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
-                <LightningBoltIcon className="w-6 h-6" />
+                <LightningIcon className="w-6 h-6" />
               </div>
               <h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Lightweight</h3>
               <p className="text-neutral-600 dark:text-neutral-400">
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index 5c41430..28377f9 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -12,7 +12,7 @@ import Locations from '@/components/dashboard/Locations'
 import TechSpecs from '@/components/dashboard/TechSpecs'
 import PerformanceStats from '@/components/dashboard/PerformanceStats'
 import { Select, DatePicker as DatePickerModal } from '@ciphera-net/ui'
-import { LightningBoltIcon } from '@radix-ui/react-icons'
+import { LightningIcon } from '@ciphera-net/ui'
 
 // Helper to get date ranges
 const getDateRange = (days: number) => {
@@ -105,7 +105,7 @@ export default function PublicDashboardPage() {
         <div className="max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-8 shadow-lg">
           <div className="text-center mb-6">
              <div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mx-auto mb-4 text-brand-orange">
-              <LightningBoltIcon className="w-6 h-6" />
+              <LightningIcon className="w-6 h-6" />
             </div>
             <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-2">
               Protected Dashboard
@@ -254,7 +254,7 @@ export default function PublicDashboardPage() {
                 rel="noopener noreferrer"
                 className="hidden md:flex items-center gap-2 px-3 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg text-sm text-neutral-600 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
               >
-                <LightningBoltIcon className="w-4 h-4" />
+                <LightningIcon className="w-4 h-4" />
                 <span>Powered by Ciphera</span>
               </a>
             </div>
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 86246c1..2f9bdfc 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -13,14 +13,14 @@ import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
 import { motion, AnimatePresence } from 'framer-motion'
 import { useAuth } from '@/lib/auth/context'
 import {
-  GearIcon,
+  SettingsIcon,
   GlobeIcon,
   FileTextIcon,
   CheckIcon,
   CopyIcon,
-  ExclamationTriangleIcon,
-  LightningBoltIcon,
-} from '@radix-ui/react-icons'
+  AlertTriangleIcon,
+  LightningIcon,
+} from '@ciphera-net/ui'
 
 const TIMEZONES = [
   'UTC',
@@ -236,7 +236,7 @@ export default function SiteSettingsPage() {
                 : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
             }`}
           >
-            <GearIcon className="w-5 h-5" />
+            <SettingsIcon className="w-5 h-5" />
             General
           </button>
           <button
@@ -267,7 +267,7 @@ export default function SiteSettingsPage() {
         <div className="flex-1 relative">
           {!canEdit && (
             <div className="mb-6 p-4 bg-amber-50 dark:bg-amber-900/10 text-amber-800 dark:text-amber-200 rounded-xl border border-amber-200 dark:border-amber-800 flex items-center gap-3">
-              <ExclamationTriangleIcon className="w-5 h-5" />
+              <AlertTriangleIcon className="w-5 h-5" />
               <p className="text-sm font-medium">You have read-only access to this site. Contact an admin to make changes.</p>
             </div>
           )}
@@ -359,7 +359,7 @@ export default function SiteSettingsPage() {
                         onClick={() => setShowVerificationModal(true)}
                         className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-all text-sm font-medium"
                       >
-                        <LightningBoltIcon className="w-4 h-4" />
+                        <LightningIcon className="w-4 h-4" />
                         Verify Installation
                       </button>
                       <p className="text-xs text-neutral-500 dark:text-neutral-500">
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 05bf02b..e43d2fa 100644
--- a/components/dashboard/Chart.tsx
+++ b/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>
diff --git a/components/dashboard/PerformanceStats.tsx b/components/dashboard/PerformanceStats.tsx
index 61eb397..920b448 100644
--- a/components/dashboard/PerformanceStats.tsx
+++ b/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'
 
diff --git a/components/settings/OrganizationSettings.tsx b/components/settings/OrganizationSettings.tsx
index da2c998..6758646 100644
--- a/components/settings/OrganizationSettings.tsx
+++ b/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>
               
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index 77cb2a0..03a737d 100644
--- a/components/sites/SiteList.tsx
+++ b/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()
diff --git a/components/sites/VerificationModal.tsx b/components/sites/VerificationModal.tsx
index 806fc93..638f78c 100644
--- a/components/sites/VerificationModal.tsx
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 8cc574e..d97f5f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.1.0",
       "dependencies": {
-        "@ciphera-net/ui": "^0.0.16",
-        "@radix-ui/react-icons": "^1.3.2",
+        "@ciphera-net/ui": "^0.0.18",
         "axios": "^1.13.2",
         "country-flag-icons": "^1.6.4",
         "d3-scale": "^4.0.2",
@@ -268,9 +267,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.0.16",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.16/896c89477d9a9907f3e1f3db950fcd84400ee64c",
-      "integrity": "sha512-HYmyv9wUxggr+ZwpR+kSf+LtmEHuvrPxHVDOg9OxVuIppjExku1YdNbKbUgYFvcLbsHDqULGDfecrgsHoC1Rgg==",
+      "version": "0.0.18",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.0.18/bc703f2d658a9ba28ad8cc6a9ff683a30b8f662f",
+      "integrity": "sha512-WMBWOx/7QHlZ7p2umIZRTA7iOB0PSgxBYyR52uHhE8tjR1jSSEzrFruth/azzwbLx8zi7DqIeeGSjxJpuRddDA==",
       "dependencies": {
         "@radix-ui/react-icons": "^1.3.0",
         "clsx": "^2.1.0",
diff --git a/package.json b/package.json
index 0415fa4..1aeb469 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.0.16",
-    "@radix-ui/react-icons": "^1.3.2",
+    "@ciphera-net/ui": "^0.0.18",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",
     "d3-scale": "^4.0.2",