Integrate design system primitives

package.json

@@ -62,16 +62,16 @@
     "@opentelemetry/semantic-conventions": "^1.36.0",
     "@radix-ui/react-avatar": "^1.1.4",
     "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.7",
     "@radix-ui/react-label": "^2.1.3",
-    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.4",
     "@radix-ui/react-select": "^2.1.7",
     "@radix-ui/react-separator": "^1.1.3",
     "@radix-ui/react-slider": "^1.2.4",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toast": "^1.2.7",
     "@radix-ui/react-tooltip": "^1.2.0",
@@ -117,9 +117,8 @@
     "file-type": "^21.3.0",
     "geist": "^1.3.1",
     "immer": "^10.1.1",
-    "lucide-react": "^0.525.0",
     "micromatch": "^4.0.8",
-    "motion": "^12.18.1",
+    "motion": "^12.23.25",
     "nanoid": "^5.0.9",
     "next": "16.1.5",
     "next-safe-action": "^8.0.11",

src/app/(auth)/auth/cli/page.tsx

@@ -1,4 +1,3 @@
-import { CloudIcon, LaptopIcon, Link2Icon } from 'lucide-react'
 import { redirect } from 'next/navigation'
 import { Suspense } from 'react'
 import { AUTH_URLS, PROTECTED_URLS } from '@/configs/urls'
@@ -8,6 +7,7 @@ import { createClient } from '@/core/shared/clients/supabase/server'
 import { encodedRedirect } from '@/lib/utils/auth'
 import { generateE2BUserAccessToken } from '@/lib/utils/server'
 import { Alert, AlertDescription, AlertTitle } from '@/ui/primitives/alert'
+import { CloudIcon, LinkIcon, SystemIcon } from '@/ui/primitives/icons'
 
 // Types
 type CLISearchParams = Promise<{
@@ -59,13 +59,13 @@ function CLIIcons() {
   return (
     <p className="flex items-center justify-center gap-4 text-3xl  tracking-tight sm:text-4xl">
       <span className="text-fg-tertiary">
-        <LaptopIcon size={50} />
+        <SystemIcon className="size-8" />
       </span>
       <span className="text-fg-secondary">
-        <Link2Icon size={30} />
+        <LinkIcon className="size-4" />
       </span>
       <span className="text-fg-tertiary">
-        <CloudIcon size={50} />
+        <CloudIcon className="size-8" />
       </span>
     </p>
   )

src/app/(auth)/confirm/page.tsx

@@ -115,7 +115,9 @@ export default function ConfirmPage() {
       <div className="mt-5">
         <Button
           onClick={handleConfirm}
-          loading={mutation.isPending || isPending}
+          loading={
+            mutation.isPending || isPending ? 'Confirming...' : undefined
+          }
           disabled={!isValidParams}
           className="w-full"
         >

src/app/(auth)/forgot-password/page.tsx

@@ -103,7 +103,7 @@ export default function ForgotPassword() {
           placeholder="you@example.com"
           required
         />
-        <Button type="submit" loading={isExecuting}>
+        <Button type="submit" loading={isExecuting ? 'Sending...' : undefined}>
           Reset Password
         </Button>
       </form>

src/app/(auth)/sign-in/page.tsx

@@ -149,7 +149,10 @@ export default function Login() {
 
           <input type="hidden" {...form.register('returnTo')} />
 
-          <Button type="submit" loading={isExecuting}>
+          <Button
+            type="submit"
+            loading={isExecuting ? 'Signing in...' : undefined}
+          >
             Sign in
           </Button>
         </form>

src/app/(auth)/sign-up/page.tsx

@@ -181,7 +181,7 @@ export default function SignUp() {
 
           <Button
             type="submit"
-            loading={isExecuting}
+            loading={isExecuting ? 'Signing up...' : undefined}
             disabled={CAPTCHA_REQUIRED_CLIENT && !turnstile.captchaToken}
           >
             Sign up

src/app/dashboard/[teamSlug]/keys/page.tsx

@@ -1,4 +1,3 @@
-import { Plus } from 'lucide-react'
 import CreateApiKeyDialog from '@/features/dashboard/settings/keys/create-api-key-dialog'
 import ApiKeysTable from '@/features/dashboard/settings/keys/table'
 import Frame from '@/ui/frame'
@@ -10,6 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/ui/primitives/card'
+import { AddIcon } from '@/ui/primitives/icons'
 
 interface KeysPageClientProps {
   params: Promise<{
@@ -38,7 +38,7 @@ export default async function KeysPage({ params }: KeysPageClientProps) {
 
             <CreateApiKeyDialog>
               <Button className="w-full sm:w-auto sm:self-start">
-                <Plus className="size-4" /> CREATE KEY
+                <AddIcon className="size-4" /> CREATE KEY
               </Button>
             </CreateApiKeyDialog>
           </div>

src/app/dashboard/[teamSlug]/webhooks/page.tsx

@@ -1,4 +1,3 @@
-import { Plus } from 'lucide-react'
 import { notFound } from 'next/navigation'
 import { INCLUDE_ARGUS } from '@/configs/flags'
 import WebhookAddEditDialog from '@/features/dashboard/settings/webhooks/add-edit-dialog'
@@ -11,6 +10,7 @@ import {
   CardDescription,
   CardHeader,
 } from '@/ui/primitives/card'
+import { AddIcon } from '@/ui/primitives/icons'
 
 interface WebhooksPageClientProps {
   params: Promise<{
@@ -43,7 +43,7 @@ export default async function WebhooksPage({
 
             <WebhookAddEditDialog mode="add">
               <Button className="w-full sm:w-auto sm:self-start">
-                <Plus className="size-4" /> Add Webhook
+                <AddIcon className="size-4" /> Add Webhook
               </Button>
             </WebhookAddEditDialog>
           </div>

src/app/dashboard/unauthorized.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { ArrowLeft, HomeIcon, ShieldX, UsersIcon } from 'lucide-react'
 import Link from 'next/link'
 import { PROTECTED_URLS } from '@/configs/urls'
 import { AsciiBackgroundPattern } from '@/ui/patterns'
@@ -12,6 +11,12 @@ import {
   CardFooter,
   CardHeader,
 } from '@/ui/primitives/card'
+import {
+  ArrowLeftIcon,
+  HomeIcon,
+  PersonsIcon,
+  ShieldXIcon,
+} from '@/ui/primitives/icons'
 
 export default function Unauthorized() {
   return (
@@ -20,7 +25,7 @@ export default function Unauthorized() {
       <Card className="w-full max-w-md border border-stroke bg-bg-1/40 backdrop-blur-lg z-10">
         <CardHeader className="text-center">
           <div className="flex justify-center mb-2">
-            <ShieldX className="h-12 w-12 text-fg-tertiary" />
+            <ShieldXIcon className="h-12 w-12 text-fg-tertiary" />
           </div>
           <span className="prose-value-big">403</span>
           <CardDescription>Access denied.</CardDescription>
@@ -31,27 +36,27 @@ export default function Unauthorized() {
             team owner or administrator to request access.
           </p>
         </CardContent>
-        <CardFooter className="flex flex-col gap-4 pt-4">
-          <div className="flex w-full justify-between gap-4">
-            <Button variant="outline" asChild className="flex-1">
-              <Link href="/" className="gap-2">
-                <HomeIcon className="h-4 w-4 text-fg-tertiary" />
+        <CardFooter className="flex flex-col gap-1">
+          <div className="flex w-full gap-1">
+            <Button variant="secondary" asChild className="flex-1">
+              <Link href="/">
+                <HomeIcon />
                 Home
               </Link>
             </Button>
-            <Button variant="outline" asChild className="flex-1">
-              <Link href={PROTECTED_URLS.DASHBOARD} className="gap-2">
-                <UsersIcon className="h-4 w-4 text-fg-tertiary" />
+            <Button variant="secondary" asChild className="flex-1">
+              <Link href={PROTECTED_URLS.DASHBOARD}>
+                <PersonsIcon />
                 My Teams
               </Link>
             </Button>
           </div>
           <Button
-            variant="outline"
+            variant="secondary"
             onClick={() => window.history.back()}
-            className="w-full gap-2"
+            className="w-full"
           >
-            <ArrowLeft className="h-4 w-4 text-fg-tertiary" />
+            <ArrowLeftIcon />
             Go Back
           </Button>
         </CardFooter>

src/configs/sidebar.ts

@@ -1,16 +1,16 @@
+import { JSX } from 'react'
 import {
-  Activity,
-  Box,
-  Container,
-  CreditCard,
-  Key,
-  type LucideProps,
-  Settings,
-  UserRoundCog,
-  Users,
-} from 'lucide-react'
-import type { ForwardRefExoticComponent, JSX, RefAttributes } from 'react'
-import { GaugeIcon, WebhookIcon } from '@/ui/primitives/icons'
+  AccountSettingsIcon,
+  CardIcon,
+  GaugeIcon,
+  KeyIcon,
+  PersonsIcon,
+  SandboxIcon,
+  SettingsIcon,
+  TemplateIcon,
+  UsageIcon,
+  WebhookIcon,
+} from '@/ui/primitives/icons'
 import { INCLUDE_ARGUS, INCLUDE_BILLING } from './flags'
 import { PROTECTED_URLS } from './urls'
 
@@ -21,11 +21,8 @@ type SidebarNavArgs = {
 export type SidebarNavItem = {
   label: string
   href: (args: SidebarNavArgs) => string
-  icon:
-    | ForwardRefExoticComponent<
-        Omit<LucideProps, 'ref'> & RefAttributes<SVGSVGElement>
-      >
-    | ((...args: any[]) => JSX.Element)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  icon: (...args: any[]) => JSX.Element
   group?: string
   activeMatch?: string
 }
@@ -35,13 +32,13 @@ export const SIDEBAR_MAIN_LINKS: SidebarNavItem[] = [
   {
     label: 'Sandboxes',
     href: (args) => PROTECTED_URLS.SANDBOXES(args.teamSlug!),
-    icon: Box,
+    icon: SandboxIcon,
     activeMatch: `/dashboard/*/sandboxes/**`,
   },
   {
     label: 'Templates',
     href: (args) => PROTECTED_URLS.TEMPLATES(args.teamSlug!),
-    icon: Container,
+    icon: TemplateIcon,
     activeMatch: `/dashboard/*/templates/**`,
   },
 
@@ -63,21 +60,21 @@ export const SIDEBAR_MAIN_LINKS: SidebarNavItem[] = [
   {
     label: 'General',
     href: (args) => PROTECTED_URLS.GENERAL(args.teamSlug!),
-    icon: Settings,
+    icon: SettingsIcon,
     group: 'team',
     activeMatch: `/dashboard/*/general`,
   },
   {
     label: 'API Keys',
     href: (args) => PROTECTED_URLS.KEYS(args.teamSlug!),
-    icon: Key,
+    icon: KeyIcon,
     group: 'team',
     activeMatch: `/dashboard/*/keys`,
   },
   {
     label: 'Members',
     href: (args) => PROTECTED_URLS.MEMBERS(args.teamSlug!),
-    icon: Users,
+    icon: PersonsIcon,
     group: 'team',
     activeMatch: `/dashboard/*/members`,
   },
@@ -88,7 +85,7 @@ export const SIDEBAR_MAIN_LINKS: SidebarNavItem[] = [
         {
           label: 'Usage',
           href: (args: SidebarNavArgs) => PROTECTED_URLS.USAGE(args.teamSlug!),
-          icon: Activity,
+          icon: UsageIcon,
           group: 'billing',
           activeMatch: `/dashboard/*/usage/**`,
         },
@@ -103,7 +100,7 @@ export const SIDEBAR_MAIN_LINKS: SidebarNavItem[] = [
           label: 'Billing',
           href: (args: SidebarNavArgs) =>
             PROTECTED_URLS.BILLING(args.teamSlug!),
-          icon: CreditCard,
+          icon: CardIcon,
           group: 'billing',
           activeMatch: `/dashboard/*/billing/**`,
         },
@@ -115,7 +112,7 @@ export const SIDEBAR_EXTRA_LINKS: SidebarNavItem[] = [
   {
     label: 'Account Settings',
     href: () => PROTECTED_URLS.ACCOUNT_SETTINGS,
-    icon: UserRoundCog,
+    icon: AccountSettingsIcon,
   },
 ]