create-tauri-ui 0.2.0 → 0.3.0

package/templates/vite/src/components/about-dialog.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { UpdateIcon } from "@radix-ui/react-icons"
+import { getName, getTauriVersion, getVersion } from "@tauri-apps/plugin-app"
+import { arch } from "@tauri-apps/plugin-os"
+import { open } from "@tauri-apps/plugin-shell"
+import {
+  GithubIcon,
+  HomeIcon,
+  LinkIcon,
+  LucideArrowUpRight,
+} from "lucide-react"
+
+import { Icons } from "./icons"
+import { Button, buttonVariants } from "./ui/button"
+import {
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog"
+
+export function AboutDialog() {
+  const [updateText, setUpdateText] = useState("")
+  const [version, setVersion] = useState("")
+  const [name, setName] = useState("")
+  const [tauriVersion, setTauriVersion] = useState("")
+  const [arc, setArc] = useState("")
+  getVersion().then((x) => setVersion(x))
+  getName().then((x) => setName(x))
+  getTauriVersion().then((x) => setTauriVersion(x))
+  arch().then((x) => setArc(x))
+
+  return (
+    <DialogContent className="overflow-clip pb-2">
+      <DialogHeader className="flex items-center text-center">
+        <div className="rounded-full bg-background p-[6px] text-slate-600 drop-shadow-none transition duration-1000 hover:text-slate-800 hover:drop-shadow-[0_0px_10px_rgba(0,10,50,0.50)] dark:hover:text-slate-400 ">
+          <Icons.logo className="h-12 w-12" />
+        </div>
+
+        <DialogTitle className="flex flex-col items-center gap-2 pt-2">
+          Tauri UI ({name})
+          <span className="flex gap-1 font-mono text-xs font-medium">
+            Version {version} ({arc})
+            <span className="font-sans font-medium text-gray-400">
+              (
+              <span
+                className="cursor-pointer text-blue-500"
+                onClick={() =>
+                  open("https://github.com/agmmnn/tauri-ui/releases/tag/v0.2.0")
+                }
+              >
+                release notes
+              </span>
+              )
+            </span>
+          </span>
+        </DialogTitle>
+
+        <DialogDescription className=" text-foreground">
+          App description.
+        </DialogDescription>
+
+        <span className="text-xs text-gray-400">{updateText}</span>
+        <DialogDescription className="flex flex-row"></DialogDescription>
+      </DialogHeader>
+
+      <span className="font-mono text-xs font-medium text-gray-400">
+        Tauri version: {tauriVersion}
+      </span>
+      <DialogFooter className="flex flex-row items-center border-t pt-2 text-slate-400 ">
+        <div className="mr-auto flex flex-row gap-2">
+          <HomeIcon
+            className="h-5 w-5 cursor-pointer transition hover:text-slate-300"
+            onClick={() => open("https://github.com/agmmnn/tauri-ui")}
+          />
+          <GithubIcon
+            className="h-5 w-5 cursor-pointer transition hover:text-slate-300 "
+            onClick={() => open("https://github.com/agmmnn/tauri-ui")}
+          />
+        </div>
+
+        <Button
+          type="submit"
+          variant="outline"
+          className="h-7 gap-1"
+          onClick={() => setUpdateText("You have the latest version.")}
+        >
+          <UpdateIcon /> Check for Updates
+        </Button>
+        <DialogPrimitive.Close
+          type="submit"
+          className={buttonVariants({ variant: "ghost", className: "h-7" })}
+        >
+          Close
+        </DialogPrimitive.Close>
+      </DialogFooter>
+    </DialogContent>
+  )
+}

package/templates/vite/src/components/icons.tsx

@@ -24,10 +24,10 @@ import {
   Twitter,
   User,
   X,
-  type Icon as LucideIcon,
+  type XIcon as LucideIcon,
 } from "lucide-react"
 
-export type Icon = LucideIcon
+export type Icon = typeof LucideIcon
 
 export const Icons = {
   logo: (props: LucideProps) => (

package/templates/vite/src/components/menu-mode-toggle.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { LaptopIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons"
 import { useTheme } from "next-themes"
 
 import { Button } from "@/components/ui/button"
@@ -28,15 +29,15 @@ export function MenuModeToggle() {
       <MenubarContent forceMount>
         <MenubarRadioGroup value={theme}>
           <MenubarRadioItem value="light" onClick={() => setTheme("light")}>
-            <Icons.sun className="mr-2 h-4 w-4" />
+            <SunIcon className="mr-2 h-4 w-4" />
             <span>Light</span>
           </MenubarRadioItem>
           <MenubarRadioItem value="dark" onClick={() => setTheme("dark")}>
-            <Icons.moon className="mr-2 h-4 w-4" />
+            <MoonIcon className="mr-2 h-4 w-4" />
             <span>Dark</span>
           </MenubarRadioItem>
           <MenubarRadioItem value="system" onClick={() => setTheme("system")}>
-            <Icons.laptop className="mr-2 h-4 w-4" />
+            <LaptopIcon className="mr-2 h-4 w-4" />
             <span>System</span>
           </MenubarRadioItem>
         </MenubarRadioGroup>

package/templates/vite/src/components/menu.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import { useCallback, useEffect, useState } from "react"
-import { appWindow, type WebviewWindow } from "@tauri-apps/plugin-window"
-import { Globe, Maximize, Mic, Music2, Sailboat, X, Zap } from "lucide-react"
+import logo from "@/assets/logo.png"
+import { Globe, Mic, Sailboat } from "lucide-react"
+import { WindowTitlebar } from "tauri-controls"
 
-import { Button } from "@/components/ui/button"
 import {
   Menubar,
   MenubarCheckboxItem,
@@ -22,211 +22,191 @@ import {
   MenubarTrigger,
 } from "@/components/ui/menubar"
 
-import { Icons } from "./icons"
+import { AboutDialog } from "./about-dialog"
 import { MenuModeToggle } from "./menu-mode-toggle"
+import { Dialog, DialogTrigger } from "./ui/dialog"
 
 export function Menu() {
-  const minimizeWindow = () => appWindow?.minimize()
-  const maximizeWindow = async () => {
-    if (await appWindow?.isMaximized()) {
-      appWindow?.unmaximize()
-    } else {
-      appWindow?.maximize()
-    }
-  }
-  const closeWindow = () => appWindow.close()
+  const closeWindow = useCallback(async () => {
+    const { appWindow } = await import("@tauri-apps/plugin-window")
+
+    appWindow.close()
+  }, [])
 
   return (
-    <Menubar className="rounded-none border-b border-none pl-2 lg:pl-3">
-      {/* App Logo */}
-      <MenubarMenu>
-        <div className="inline-flex h-fit w-fit items-center text-cyan-500">
-          <Sailboat className="h-5 w-5" />
-        </div>
-      </MenubarMenu>
+    <WindowTitlebar
+    // controlsOrder="platform"
+    // windowControlsProps={{ platform: "macos", className: "" }}
+    >
+      <Menubar className="rounded-none border-b border-none pl-2 lg:pl-3">
+        <MenubarMenu>
+          <div className="inline-flex h-fit w-fit items-center text-cyan-500">
+            <Sailboat className="h-5 w-5" />
+          </div>
+        </MenubarMenu>
+
+        <MenubarMenu>
+          <MenubarTrigger className="font-bold">App</MenubarTrigger>
+          <Dialog modal={false}>
+            <MenubarContent>
+              <DialogTrigger asChild>
+                <MenubarItem>About App</MenubarItem>
+              </DialogTrigger>
 
-      <MenubarMenu>
-        <MenubarTrigger className="font-bold">App</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>About App</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Preferences... <MenubarShortcut>⌘,</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Hide Music... <MenubarShortcut>⌘H</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut>
-          </MenubarItem>
-          <MenubarShortcut />
-          <MenubarItem onClick={closeWindow}>
-            Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger className="relative">File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarSub>
-            <MenubarSubTrigger>New</MenubarSubTrigger>
-            <MenubarSubContent className="w-[230px]">
+              <MenubarSeparator />
               <MenubarItem>
-                Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+                Preferences... <MenubarShortcut>⌘,</MenubarShortcut>
               </MenubarItem>
-              <MenubarItem disabled>
-                Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
+              <MenubarSeparator />
+              <MenubarItem>
+                Hide Music... <MenubarShortcut>⌘H</MenubarShortcut>
               </MenubarItem>
               <MenubarItem>
-                Smart Playlist... <MenubarShortcut>⌥⌘N</MenubarShortcut>
+                Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut>
               </MenubarItem>
-              <MenubarItem>Playlist Folder</MenubarItem>
-              <MenubarItem disabled>Genius Playlist</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarItem>
-            Open Stream URL... <MenubarShortcut>⌘U</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Close Window <MenubarShortcut>⌘W</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Library</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Update Cloud Library</MenubarItem>
-              <MenubarItem>Update Genius</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Organize Library...</MenubarItem>
-              <MenubarItem>Export Library...</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Import Playlist...</MenubarItem>
-              <MenubarItem disabled>Export Playlist...</MenubarItem>
-              <MenubarItem>Show Duplicate Items</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Get Album Artwork</MenubarItem>
-              <MenubarItem disabled>Get Track Names</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarItem>
-            Import... <MenubarShortcut>⌘O</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>Burn Playlist to Disc...</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
-          </MenubarItem>
-          <MenubarItem>Convert</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Page Setup...</MenubarItem>
-          <MenubarItem disabled>
-            Print... <MenubarShortcut>⌘P</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem disabled>
-            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem disabled>
-            Cut <MenubarShortcut>⌘X</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Copy <MenubarShortcut>⌘C</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Paste <MenubarShortcut>⌘V</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Select All <MenubarShortcut>⌘A</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Smart Dictation...{" "}
-            <MenubarShortcut>
-              <Mic className="h-4 w-4" />
-            </MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Emoji & Symbols{" "}
-            <MenubarShortcut>
-              <Globe className="h-4 w-4" />
-            </MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarCheckboxItem>Show Playing Next</MenubarCheckboxItem>
-          <MenubarCheckboxItem checked>Show Lyrics</MenubarCheckboxItem>
-          <MenubarSeparator />
-          <MenubarItem inset disabled>
-            Show Status Bar
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Hide Sidebar</MenubarItem>
-          <MenubarItem disabled inset>
-            Enter Full Screen
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Account</MenubarTrigger>
-        <MenubarContent forceMount>
-          <MenubarLabel inset>Switch Account</MenubarLabel>
-          <MenubarSeparator />
-          <MenubarRadioGroup value="benoit">
-            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-          </MenubarRadioGroup>
-          <MenubarSeparator />
-          <MenubarItem inset>Manage Famliy...</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Add Account...</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-
-      <MenuModeToggle />
+              <MenubarShortcut />
+              <MenubarItem onClick={closeWindow}>
+                Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+            <AboutDialog />
+          </Dialog>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger className="relative">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarSub>
+              <MenubarSubTrigger>New</MenubarSubTrigger>
+              <MenubarSubContent className="w-[230px]">
+                <MenubarItem>
+                  Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem disabled>
+                  Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  Smart Playlist... <MenubarShortcut>⌥⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>Playlist Folder</MenubarItem>
+                <MenubarItem disabled>Genius Playlist</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarItem>
+              Open Stream URL... <MenubarShortcut>⌘U</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Close Window <MenubarShortcut>⌘W</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarSub>
+              <MenubarSubTrigger>Library</MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Update Cloud Library</MenubarItem>
+                <MenubarItem>Update Genius</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Organize Library...</MenubarItem>
+                <MenubarItem>Export Library...</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Import Playlist...</MenubarItem>
+                <MenubarItem disabled>Export Playlist...</MenubarItem>
+                <MenubarItem>Show Duplicate Items</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Get Album Artwork</MenubarItem>
+                <MenubarItem disabled>Get Track Names</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarItem>
+              Import... <MenubarShortcut>⌘O</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>Burn Playlist to Disc...</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
+            </MenubarItem>
+            <MenubarItem>Convert</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>Page Setup...</MenubarItem>
+            <MenubarItem disabled>
+              Print... <MenubarShortcut>⌘P</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Edit</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem disabled>
+              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem disabled>
+              Cut <MenubarShortcut>⌘X</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Copy <MenubarShortcut>⌘C</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Paste <MenubarShortcut>⌘V</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Select All <MenubarShortcut>⌘A</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Smart Dictation...{" "}
+              <MenubarShortcut>
+                <Mic className="h-4 w-4" />
+              </MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Emoji & Symbols{" "}
+              <MenubarShortcut>
+                <Globe className="h-4 w-4" />
+              </MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem>Show Playing Next</MenubarCheckboxItem>
+            <MenubarCheckboxItem checked>Show Lyrics</MenubarCheckboxItem>
+            <MenubarSeparator />
+            <MenubarItem inset disabled>
+              Show Status Bar
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Hide Sidebar</MenubarItem>
+            <MenubarItem disabled inset>
+              Enter Full Screen
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Account</MenubarTrigger>
+          <MenubarContent forceMount>
+            <MenubarLabel inset>Switch Account</MenubarLabel>
+            <MenubarSeparator />
+            <MenubarRadioGroup value="benoit">
+              <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+              <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+            </MenubarRadioGroup>
+            <MenubarSeparator />
+            <MenubarItem inset>Manage Famliy...</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Add Account...</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
 
-      <div
-        data-tauri-drag-region
-        className="inline-flex h-full w-full justify-end"
-      >
-        <Button
-          onClick={minimizeWindow}
-          variant="ghost"
-          className="h-8 focus:outline-none"
-        >
-          <Icons.minimize className="h-3 w-3" />
-        </Button>
-        <Button
-          onClick={maximizeWindow}
-          variant="ghost"
-          className="h-8 focus:outline-none"
-        >
-          <Maximize className="h-4 w-4" />
-        </Button>
-        <Button
-          onClick={closeWindow}
-          variant="ghost"
-          className="h-8 focus:outline-none"
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-    </Menubar>
+        <MenuModeToggle />
+      </Menubar>
+    </WindowTitlebar>
   )
 }

package/templates/vite/src/components/ui/accordion.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import { ChevronDown } from "lucide-react"
@@ -34,7 +32,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 transition-transform duration-200" />
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))

package/templates/vite/src/components/ui/alert-dialog.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
@@ -12,14 +10,9 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 
 const AlertDialogPortal = ({
   className,
-  children,
   ...props
 }: AlertDialogPrimitive.AlertDialogPortalProps) => (
-  <AlertDialogPrimitive.Portal className={cn(className)} {...props}>
-    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
-      {children}
-    </div>
-  </AlertDialogPrimitive.Portal>
+  <AlertDialogPrimitive.Portal className={cn(className)} {...props} />
 )
 AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName
 
@@ -29,7 +22,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in",
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -47,7 +40,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
         className
       )}
       {...props}

package/templates/vite/src/components/ui/alert.tsx

@@ -1,18 +1,16 @@
-"use client"
-
 import * as React from "react"
-import { VariantProps, cva } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {
         default: "bg-background text-foreground",
         destructive:
-          "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
     },
     defaultVariants: {

package/templates/vite/src/components/ui/aspect-ratio.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 
 const AspectRatio = AspectRatioPrimitive.Root

package/templates/vite/src/components/ui/avatar.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as AvatarPrimitive from "@radix-ui/react-avatar"