create-tauri-ui 0.3.1 → 0.3.3

package/templates/next/postcss.config.js

@@ -1,6 +1,6 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/next/prettier.config.js

@@ -1,35 +1,35 @@
-/** @type {import('prettier').Config} */
-module.exports = {
-  endOfLine: "lf",
-  semi: false,
-  singleQuote: false,
-  tabWidth: 2,
-  trailingComma: "es5",
-  importOrder: [
-    "^(react/(.*)$)|^(react$)",
-    "^(next/(.*)$)|^(next$)",
-    "<THIRD_PARTY_MODULES>",
-    "",
-    "^types$",
-    "^@/types/(.*)$",
-    "^@/config/(.*)$",
-    "^@/lib/(.*)$",
-    "^@/hooks/(.*)$",
-    "^@/components/ui/(.*)$",
-    "^@/components/(.*)$",
-    "^@/styles/(.*)$",
-    "^@/app/(.*)$",
-    "",
-    "^[./]",
-  ],
-  importOrderSeparation: false,
-  importOrderSortSpecifiers: true,
-  importOrderBuiltinModulesToTop: true,
-  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-  importOrderMergeDuplicateImports: true,
-  importOrderCombineTypeAndValueImports: true,
-  plugins: [
-    "@ianvs/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss",
-  ],
-}
+/** @type {import('prettier').Config} */
+module.exports = {
+  endOfLine: "lf",
+  semi: false,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
+  importOrder: [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^types$",
+    "^@/types/(.*)$",
+    "^@/config/(.*)$",
+    "^@/lib/(.*)$",
+    "^@/hooks/(.*)$",
+    "^@/components/ui/(.*)$",
+    "^@/components/(.*)$",
+    "^@/styles/(.*)$",
+    "^@/app/(.*)$",
+    "",
+    "^[./]",
+  ],
+  importOrderSeparation: false,
+  importOrderSortSpecifiers: true,
+  importOrderBuiltinModulesToTop: true,
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderMergeDuplicateImports: true,
+  importOrderCombineTypeAndValueImports: true,
+  plugins: [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss",
+  ],
+}

package/templates/next/src/app/examples/layout.tsx

@@ -1,7 +1,7 @@
-interface ExamplesLayoutProps {
-  children: React.ReactNode
-}
-
-export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
-  return <>{children}</>
-}
+interface ExamplesLayoutProps {
+  children: React.ReactNode
+}
+
+export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
+  return <>{children}</>
+}

package/templates/next/src/app/page.tsx

@@ -1,5 +1,5 @@
-import MusicPage from "./examples/music/page"
-
-export default function App() {
-  return <MusicPage />
-}
+import MusicPage from "./examples/music/page"
+
+export default function App() {
+  return <MusicPage />
+}

package/templates/next/src/components/examples-nav.tsx

@@ -1,70 +1,70 @@
-"use client"
-
-import { usePathname } from "next/navigation"
-
-import {
-  MenubarContent,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarTrigger,
-} from "@/components/ui/menubar"
-
-const examples = [
-  {
-    name: "Dashboard",
-    href: "/examples/dashboard",
-  },
-  {
-    name: "Cards",
-    href: "/examples/cards",
-  },
-  {
-    name: "Tasks",
-    href: "/examples/tasks",
-  },
-  {
-    name: "Playground",
-    href: "/examples/playground",
-  },
-  {
-    name: "Forms",
-    href: "/examples/forms",
-  },
-  {
-    name: "Music",
-    href: "/examples/music",
-  },
-  {
-    name: "Authentication",
-    href: "/examples/authentication",
-  },
-]
-
-interface ExamplesNavProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
-  const pathname = usePathname() === "/" ? "/examples/music" : usePathname()
-
-  return (
-    <MenubarMenu>
-      <MenubarTrigger>
-        <span className="rounded-md bg-cyan-500 px-1.5 py-0.5 text-xs font-medium leading-none text-[#000000] no-underline group-hover:no-underline">
-          nav
-        </span>
-        {pathname}
-      </MenubarTrigger>
-      <MenubarContent forceMount>
-        <MenubarRadioGroup value={pathname}>
-          {examples.map((example) => (
-            <a href={example.href} key={example.name}>
-              <MenubarRadioItem value={example.href}>
-                {example.name}
-              </MenubarRadioItem>
-            </a>
-          ))}
-        </MenubarRadioGroup>
-      </MenubarContent>
-    </MenubarMenu>
-  )
-}
+"use client"
+
+import { usePathname } from "next/navigation"
+
+import {
+  MenubarContent,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
+
+const examples = [
+  {
+    name: "Dashboard",
+    href: "/examples/dashboard",
+  },
+  {
+    name: "Cards",
+    href: "/examples/cards",
+  },
+  {
+    name: "Tasks",
+    href: "/examples/tasks",
+  },
+  {
+    name: "Playground",
+    href: "/examples/playground",
+  },
+  {
+    name: "Forms",
+    href: "/examples/forms",
+  },
+  {
+    name: "Music",
+    href: "/examples/music",
+  },
+  {
+    name: "Authentication",
+    href: "/examples/authentication",
+  },
+]
+
+interface ExamplesNavProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
+  const pathname = usePathname() === "/" ? "/examples/music" : usePathname()
+
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>
+        <span className="rounded-md bg-cyan-500 px-1.5 py-0.5 text-xs font-medium leading-none text-[#000000] no-underline group-hover:no-underline">
+          nav
+        </span>
+        {pathname}
+      </MenubarTrigger>
+      <MenubarContent forceMount>
+        <MenubarRadioGroup value={pathname}>
+          {examples.map((example) => (
+            <a href={example.href} key={example.name}>
+              <MenubarRadioItem value={example.href}>
+                {example.name}
+              </MenubarRadioItem>
+            </a>
+          ))}
+        </MenubarRadioGroup>
+      </MenubarContent>
+    </MenubarMenu>
+  )
+}

package/templates/next/src/components/greeting.tsx

@@ -1,21 +1,21 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { invoke } from "@tauri-apps/api/tauri"
-
-export function Greeting() {
-  const [greetMsg, setGreetMsg] = useState("")
-  const [name, setName] = useState("")
-
-  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-  async function greet() {
-    setGreetMsg(await invoke("greet", { name }))
-  }
-
-  // inspect console: Hello, World! You've been greeted from Rust!
-  useEffect(() => {
-    invoke("greet", { name: "World" }).then(console.log).catch(console.error)
-  })
-
-  return <></>
-}
+"use client"
+
+import { useEffect, useState } from "react"
+import { invoke } from "@tauri-apps/api/tauri"
+
+export function Greeting() {
+  const [greetMsg, setGreetMsg] = useState("")
+  const [name, setName] = useState("")
+
+  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+  async function greet() {
+    setGreetMsg(await invoke("greet", { name }))
+  }
+
+  // inspect console: Hello, World! You've been greeted from Rust!
+  useEffect(() => {
+    invoke("greet", { name: "World" }).then(console.log).catch(console.error)
+  })
+
+  return <></>
+}

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

@@ -37,8 +37,9 @@ export function Menu() {
 
   return (
     <WindowTitlebar
-    // controlsOrder="system"
-    // windowControlsProps={{ platform: "macos" }}
+    // controlsOrder="left"
+    // className="pl-0"
+    // windowControlsProps={{ platform: "windows", justify: false }}
     >
       <Menubar className="rounded-none border-b border-none pl-2 lg:pl-3">
         <MenubarMenu>

package/templates/next/src/components/mode-toggle.tsx

@@ -1,43 +1,43 @@
-"use client"
-
-import * as React from "react"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Icons } from "@/components/icons"
-
-export function ModeToggle() {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="w-9 px-0">
-          <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          <Icons.sun className="mr-2 h-4 w-4" />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          <Icons.moon className="mr-2 h-4 w-4" />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          <Icons.laptop className="mr-2 h-4 w-4" />
-          <span>System</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Icons } from "@/components/icons"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="w-9 px-0">
+          <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          <Icons.sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <Icons.moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          <Icons.laptop className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/templates/next/src/components/page-header.tsx

@@ -1,52 +1,52 @@
-"use client"
-
-import Balance from "react-wrap-balancer"
-
-import { cn } from "@/lib/utils"
-
-function PageHeader({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <section
-      className={cn(
-        "flex max-w-[980px] flex-col items-start gap-2 py-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function PageHeaderHeading({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLHeadingElement>) {
-  return (
-    <h1
-      className={cn(
-        "text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:text-6xl lg:leading-[1.1]",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function PageHeaderDescription({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLParagraphElement>) {
-  return (
-    <Balance
-      className={cn(
-        "max-w-[750px] text-lg text-muted-foreground sm:text-xl",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { PageHeader, PageHeaderHeading, PageHeaderDescription }
+"use client"
+
+import Balance from "react-wrap-balancer"
+
+import { cn } from "@/lib/utils"
+
+function PageHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <section
+      className={cn(
+        "flex max-w-[980px] flex-col items-start gap-2 py-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderHeading({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h1
+      className={cn(
+        "text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:text-6xl lg:leading-[1.1]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <Balance
+      className={cn(
+        "max-w-[750px] text-lg text-muted-foreground sm:text-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { PageHeader, PageHeaderHeading, PageHeaderDescription }

package/templates/next/src/components/style-switcher.tsx

@@ -1,19 +1,19 @@
-"use client"
-
-import * as React from "react"
-import { useSelectedLayoutSegments } from "next/navigation"
-
-export function StyleSwitcher() {
-  const segments = useSelectedLayoutSegments()
-
-  React.useEffect(() => {
-    document.body.removeAttribute("data-section")
-
-    const section = segments.at(-1)
-    if (section && typeof window !== "undefined") {
-      document.body.setAttribute("data-section", section)
-    }
-  }, [segments])
-
-  return null
-}
+"use client"
+
+import * as React from "react"
+import { useSelectedLayoutSegments } from "next/navigation"
+
+export function StyleSwitcher() {
+  const segments = useSelectedLayoutSegments()
+
+  React.useEffect(() => {
+    document.body.removeAttribute("data-section")
+
+    const section = segments.at(-1)
+    if (section && typeof window !== "undefined") {
+      document.body.setAttribute("data-section", section)
+    }
+  }, [segments])
+
+  return null
+}

package/templates/next/src/components/tailwind-indicator.tsx

@@ -1,18 +1,18 @@
-"use client"
-
-export function TailwindIndicator() {
-  if (process.env.NODE_ENV === "production") return null
-
-  return (
-    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
-      <div className="block sm:hidden">xs</div>
-      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
-        sm
-      </div>
-      <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
-      <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
-      <div className="hidden xl:block 2xl:hidden">xl</div>
-      <div className="hidden 2xl:block">2xl</div>
-    </div>
-  )
-}
+"use client"
+
+export function TailwindIndicator() {
+  if (process.env.NODE_ENV === "production") return null
+
+  return (
+    <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
+      <div className="block sm:hidden">xs</div>
+      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">
+        sm
+      </div>
+      <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
+      <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
+      <div className="hidden xl:block 2xl:hidden">xl</div>
+      <div className="hidden 2xl:block">2xl</div>
+    </div>
+  )
+}

package/templates/next/src/components/theme-provider.tsx

@@ -1,9 +1,9 @@
-"use client"
-
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { ThemeProviderProps } from "next-themes/dist/types"
-
-export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}