upgrade to the latest intentui

Author: irsyadadl

components.json

@@ -17,8 +17,5 @@
             "lib": "@/lib",
             "hooks": "@/hooks"
         },
-        "iconLibrary": "@intentui/icons",
-        "registries": {
-            "@intentui": "https://intentui.com/r/{name}"
-        }
+        "iconLibrary": "@heroicons/react"
     }

package-lock.json

@@ -28,7 +28,7 @@
         "vite-plugin-run": "^0.6.1"
     },
     "dependencies": {
-        "@intentui/icons": "^1.11.0",
+        "@heroicons/react": "^2.2.0",
         "@types/node": "^22.15.34",
         "motion": "^12.19.2",
         "react": "^19.1.0",

package.json

@@ -6,16 +6,13 @@
 
 @variant dark (&:is(.dark *));
 
-@theme {
-  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+@theme inline {
+    --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
     --font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
     --font-mono--font-feature-settings: "ss02", "zero";
 
-    --color-shiki-bg: var(--shiki-bg);
-    --color-shiki-border: var(--input);
-
     --color-border: var(--border);
     --color-input: var(--input);
 
@@ -26,6 +23,8 @@
 
     --color-primary: var(--primary);
     --color-primary-fg: var(--primary-fg);
+    --color-primary-subtle: var(--primary-subtle);
+    --color-primary-subtle-fg: var(--primary-subtle-fg);
 
     --color-secondary: var(--secondary);
     --color-secondary-fg: var(--secondary-fg);
@@ -35,12 +34,21 @@
 
     --color-success: var(--success);
     --color-success-fg: var(--success-fg);
+    --color-success-subtle: var(--success-subtle);
+    --color-success-subtle-fg: var(--success-subtle-fg);
 
     --color-danger: var(--danger);
     --color-danger-fg: var(--danger-fg);
+    --color-danger-subtle: var(--danger-subtle);
+    --color-danger-subtle-fg: var(--danger-subtle-fg);
 
     --color-warning: var(--warning);
     --color-warning-fg: var(--warning-fg);
+    --color-warning-subtle: var(--warning-subtle);
+    --color-warning-subtle-fg: var(--warning-subtle-fg);
+
+    --color-info-subtle: var(--info-subtle);
+    --color-info-subtle-fg: var(--info-subtle-fg);
 
     --color-muted: var(--muted);
     --color-muted-fg: var(--muted-fg);
@@ -65,18 +73,39 @@
     --color-chart-3: var(--chart-3);
     --color-chart-4: var(--chart-4);
     --color-chart-5: var(--chart-5);
+
+    --animate-marquee: marquee var(--duration) infinite linear;
+    --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+
+    @keyframes marquee {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(calc(-100% - var(--gap)));
+        }
+    }
+
+    @keyframes marquee-vertical {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(calc(-100% - var(--gap)));
+        }
+    }
 }
 
 :root {
-    --shiki-bg: var(--bg);
-    --shiki-light: var(--shiki-bg);
-
     --bg: oklch(1 0 0);
-    --fg: oklch(0.141 0.005 285.823);
+    --fg: oklch(0.21 0.006 285.885);
 
     --primary: oklch(0.546 0.245 262.881);
     --primary-fg: oklch(1 0 0);
 
+    --primary-subtle: oklch(0.623 0.214 259.815 / 0.15);
+    --primary-subtle-fg: oklch(0.488 0.243 264.376);
+
     --secondary: oklch(0.92 0.004 286.32);
     --secondary-fg: oklch(0.141 0.005 285.823);
 
@@ -92,12 +121,24 @@
     --success: oklch(0.596 0.145 163.225);
     --success-fg: oklch(1 0 0);
 
+    --success-subtle: oklch(0.696 0.17 162.48 / 0.15);
+    --success-subtle-fg: oklch(0.508 0.118 165.612);
+
+    --info-subtle: oklch(0.685 0.169 237.323 / 0.15);
+    --info-subtle-fg: oklch(0.5 0.134 242.749);
+
     --warning: oklch(0.828 0.189 84.429);
     --warning-fg: oklch(0.279 0.077 45.635);
 
+    --warning-subtle: oklch(0.828 0.189 84.429 / 0.2);
+    --warning-subtle-fg: oklch(0.555 0.163 48.998);
+
     --danger: oklch(0.577 0.245 27.325);
     --danger-fg: oklch(0.971 0.013 17.38);
 
+    --danger-subtle: oklch(0.637 0.237 25.331 / 0.15);
+    --danger-subtle-fg: oklch(0.505 0.213 27.518);
+
     --border: oklch(0.911 0.006 286.286);
     --input: oklch(0.871 0.006 286.286);
     --ring: oklch(0.546 0.245 262.881);
@@ -115,10 +156,10 @@
     --sidebar-ring: oklch(0.546 0.245 262.881);
 
     --chart-1: oklch(0.546 0.245 262.881);
-    --chart-2: oklch(0.707 0.165 254.624);
-    --chart-3: oklch(0.809 0.105 251.813);
-    --chart-4: oklch(0.882 0.059 254.128);
-    --chart-5: oklch(0.932 0.032 255.585);
+    --chart-2: oklch(0.623 0.214 259.815);
+    --chart-3: oklch(0.707 0.165 254.624);
+    --chart-4: oklch(0.809 0.105 251.813);
+    --chart-5: oklch(0.882 0.059 254.128);
 
     --radius-lg: 0.5rem;
     --radius-xs: calc(var(--radius-lg) * 0.5);
@@ -131,44 +172,56 @@
 }
 
 .dark {
-    --shiki-bg: #09090b;
-    --shiki-da--bg: oklch(0.091 0.005 285.823);
-
     --bg: oklch(0.181 0.005 285.823);
     --fg: oklch(0.985 0 0);
 
     --primary: oklch(0.546 0.245 262.881);
     --primary-fg: oklch(1 0 0);
 
+    --primary-subtle: oklch(0.623 0.214 259.815 / 0.1);
+    --primary-subtle-fg: oklch(0.707 0.165 254.624);
+
     --secondary: oklch(0.244 0.006 286.033);
     --secondary-fg: oklch(0.985 0 0);
 
+    --overlay: oklch(0.210 0.006 285.885);
+    --overlay-fg: oklch(0.985 0 0);
+
     --accent: oklch(0.274 0.006 286.033);
     --accent-fg: oklch(0.985 0 0);
 
     --muted: oklch(0.21 0.006 285.885);
     --muted-fg: oklch(0.705 0.015 286.067);
 
-    --overlay: oklch(0.180 0.006 285.885);
-    --overlay-fg: oklch(0.985 0 0);
-
     --success: oklch(0.596 0.145 163.225);
     --success-fg: oklch(1 0 0);
 
+    --success-subtle: oklch(0.696 0.17 162.48 / 0.1);
+    --success-subtle-fg: oklch(0.765 0.177 163.223);
+
+    --info-subtle: oklch(0.685 0.169 237.323 / 0.1);
+    --info-subtle-fg: oklch(0.828 0.111 230.318);
+
     --warning: oklch(0.828 0.189 84.429);
     --warning-fg: oklch(0.279 0.077 45.635);
 
+    --warning-subtle: oklch(0.828 0.189 84.429 / 0.1);
+    --warning-subtle-fg: oklch(0.828 0.189 84.429);
+
     --danger: oklch(0.577 0.245 27.325);
     --danger-fg: oklch(0.971 0.013 17.38);
 
-    --border: oklch(0.270 0.013 285.805);
+    --danger-subtle: oklch(0.637 0.237 25.331 / 0.1);
+    --danger-subtle-fg: oklch(0.704 0.191 22.216);
+
+    --border: oklch(0.342 0.017 285.786);
     --input: oklch(0.320 0.013 285.805);
     --ring: oklch(0.546 0.245 262.881);
 
     --navbar: oklch(0.190 0.006 285.885);
     --navbar-fg: oklch(0.985 0 0);
 
-    --sidebar: oklch(0.180 0.006 285.885);
+    --sidebar: oklch(0.21 0.006 285.885);
     --sidebar-fg: oklch(0.985 0 0);
     --sidebar-primary: oklch(0.546 0.245 262.881);
     --sidebar-primary-fg: oklch(1 0 0);

resources/css/app.css

@@ -2,6 +2,8 @@ import type { SVGProps } from "react"
 import { Button } from "@/components/ui/button"
 import { Link } from "@/components/ui/link"
 import { TextField } from "@/components/ui/text-field"
+import { Input } from "@/components/ui/input"
+import { FieldError } from "@/components/ui/field"
 
 const navigation = {
   solutions: [
@@ -178,13 +180,13 @@ export function Footer() {
                 <TextField
                   className="w-full"
                   aria-label="Email address"
-                  type="email"
                   name="email-address"
-                  id="email-address"
                   autoComplete="email"
                   isRequired
-                  placeholder="Enter your email"
-                />
+                >
+                  <Input type="email" placeholder="Enter your email" />
+                  <FieldError />
+                </TextField>
                 <div className="mt-6 sm:mt-0 sm:ml-2 sm:flex-shrink-0">
                   <Button type="submit">Subscribe</Button>
                 </div>

resources/js/components/footer.tsx

@@ -1,4 +1,3 @@
-
 import type React from "react"
 import { Avatar } from "@/components/ui/avatar"
 

resources/js/components/logo.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import { ComputerDesktopIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+import { type Theme, useTheme } from "@/hooks/use-theme"
+
+interface Themes {
+  value: Theme
+  icon: React.FC<React.SVGAttributes<SVGSVGElement>>
+  label: string
+}
+
+export function ThemeSwitcher() {
+  const { theme, updateTheme } = useTheme()
+  const themes: Themes[] = [
+    { value: "light", icon: SunIcon, label: "Light" },
+    {
+      value: "dark",
+      icon: MoonIcon,
+      label: "Dark",
+    },
+    {
+      value: "system",
+      icon: ComputerDesktopIcon,
+      label: "System",
+    },
+  ]
+
+  return (
+    <ToggleGroup
+      size="sm"
+      selectedKeys={new Set([theme])}
+      onSelectionChange={(v) => {
+        // @ts-expect-error
+        updateTheme([...v][0])
+      }}
+      selectionMode="single"
+      aria-label="Choose theme"
+    >
+      {themes.map((theme) => (
+        <ToggleGroupItem key={theme.value} id={theme.value} aria-label={theme.value}>
+          <theme.icon />
+          {theme.label}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  )
+}