create-tauri-ui 0.1.5 → 0.2.0

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/authentication/components/user-auth-form.tsx

@@ -3,10 +3,10 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
+import { Icons } from "@/components/icons"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { Icons } from "@/components/icons"
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {}
 

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

@@ -1,6 +1,6 @@
 import { Metadata } from "next"
 import Image from "next/image"
-import { Command } from "lucide-react"
+import Link from "next/link"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
@@ -13,68 +13,76 @@ export const metadata: Metadata = {
 
 export default function AuthenticationPage() {
   return (
-    <div className="container relative  h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
-      <a
-        href="/examples/authentication"
-        className={cn(
-          buttonVariants({ variant: "ghost", size: "sm" }),
-          "absolute right-4 top-4 md:right-8 md:top-8"
-        )}
-      >
-        Login
-      </a>
-      <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
-        <div
-          className="absolute inset-0 bg-cover"
-          style={{
-            backgroundImage:
-              "url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80)",
-          }}
-        />
-        <div className="relative z-20 flex items-center text-lg font-medium">
-          <Command className="mr-2 h-6 w-6" /> Acme Inc
-        </div>
-        <div className="relative z-20 mt-auto">
-          <blockquote className="space-y-2">
-            <p className="text-lg">
-              &ldquo;This library has saved me countless hours of work and
-              helped me deliver stunning designs to my clients faster than ever
-              before. Highly recommended!&rdquo;
-            </p>
-            <footer className="text-sm">Sofia Davis</footer>
-          </blockquote>
+    <>
+      <div className="container relative  h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+        <Link
+          href="/examples/authentication"
+          className={cn(
+            buttonVariants({ variant: "ghost" }),
+            "absolute right-4 top-4 md:right-8 md:top-8"
+          )}
+        >
+          Login
+        </Link>
+        <div className="relative  h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+          <div className="absolute inset-0 bg-zinc-900" />
+          <div className="relative z-20 flex items-center text-lg font-medium">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mr-2 h-6 w-6"
+            >
+              <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+            </svg>
+            Acme Inc
+          </div>
+          <div className="relative z-20 mt-auto">
+            <blockquote className="space-y-2">
+              <p className="text-lg">
+                &ldquo;This library has saved me countless hours of work and
+                helped me deliver stunning designs to my clients faster than
+                ever before.&rdquo;
+              </p>
+              <footer className="text-sm">Sofia Davis</footer>
+            </blockquote>
+          </div>
         </div>
-      </div>
-      <div className="lg:p-8">
-        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-          <div className="flex flex-col space-y-2 text-center">
-            <h1 className="text-2xl font-semibold tracking-tight">
-              Create an account
-            </h1>
-            <p className="text-sm text-muted-foreground">
-              Enter your email below to create your account
+        <div className="lg:p-8">
+          <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+            <div className="flex flex-col space-y-2 text-center">
+              <h1 className="text-2xl font-semibold tracking-tight">
+                Create an account
+              </h1>
+              <p className="text-sm text-muted-foreground">
+                Enter your email below to create your account
+              </p>
+            </div>
+            <UserAuthForm />
+            <p className="px-8 text-center text-sm text-muted-foreground">
+              By clicking continue, you agree to our{" "}
+              <Link
+                href="/terms"
+                className="underline underline-offset-4 hover:text-primary"
+              >
+                Terms of Service
+              </Link>{" "}
+              and{" "}
+              <Link
+                href="/privacy"
+                className="underline underline-offset-4 hover:text-primary"
+              >
+                Privacy Policy
+              </Link>
+              .
             </p>
           </div>
-          <UserAuthForm />
-          <p className="px-8 text-center text-sm text-muted-foreground">
-            By clicking continue, you agree to our{" "}
-            <a
-              href="/terms"
-              className="underline underline-offset-4 hover:text-primary"
-            >
-              Terms of Service
-            </a>{" "}
-            and{" "}
-            <a
-              href="/privacy"
-              className="underline underline-offset-4 hover:text-primary"
-            >
-              Privacy Policy
-            </a>
-            .
-          </p>
         </div>
       </div>
-    </div>
+    </>
   )
 }

package/templates/next/src/app/examples/cards/components/create-account.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { Icons } from "@/components/icons"
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -11,7 +12,6 @@ import {
 } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { Icons } from "@/components/icons"
 
 export function DemoCreateAccount() {
   return (

package/templates/next/src/app/examples/cards/components/date-picker.tsx

@@ -1,6 +1,6 @@
+import DatePickerWithRange from "@/components/example/date-picker-with-range"
 import { Card, CardContent } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
-import { CalendarDateRangePicker } from "@/components/examples/calendar/date-range-picker"
 
 export function DemoDatePicker() {
   return (
@@ -10,7 +10,7 @@ export function DemoDatePicker() {
           <Label htmlFor="date" className="shrink-0">
             Pick a date
           </Label>
-          <CalendarDateRangePicker className="[&>button]:w-[260px]" />
+          <DatePickerWithRange className="[&>button]:w-[260px]" />
         </div>
       </CardContent>
     </Card>

package/templates/next/src/app/examples/cards/components/github-card.tsx

@@ -1,4 +1,9 @@
-import { ChevronDown, Circle, Plus, Star } from "lucide-react"
+import {
+  ChevronDownIcon,
+  CircleIcon,
+  PlusIcon,
+  StarIcon,
+} from "@radix-ui/react-icons"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -31,15 +36,15 @@ export function DemoGithub() {
           </CardDescription>
         </div>
         <div className="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
-          <Button variant="secondary" className="px-3">
-            <Star className="mr-2 h-4 w-4" />
+          <Button variant="secondary" className="px-3 shadow-none">
+            <StarIcon className="mr-2 h-4 w-4" />
             Star
           </Button>
           <Separator orientation="vertical" className="h-[20px]" />
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="secondary" className="px-2">
-                <ChevronDown className="h-4 w-4 text-secondary-foreground" />
+              <Button variant="secondary" className="px-2 shadow-none">
+                <ChevronDownIcon className="h-4 w-4 text-secondary-foreground" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
@@ -57,7 +62,7 @@ export function DemoGithub() {
               <DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem>
-                <Plus className="mr-2 h-4 w-4" /> Create List
+                <PlusIcon className="mr-2 h-4 w-4" /> Create List
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -66,12 +71,12 @@ export function DemoGithub() {
       <CardContent>
         <div className="flex space-x-4 text-sm text-muted-foreground">
           <div className="flex items-center">
-            <Circle className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
-            TypeScipt
+            <CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
+            TypeScript
           </div>
           <div className="flex items-center">
-            <Star className="mr-1 h-3 w-3" />
-            10k
+            <StarIcon className="mr-1 h-3 w-3" />
+            20k
           </div>
           <div>Updated April 2023</div>
         </div>

package/templates/next/src/app/examples/cards/components/notifications.tsx

@@ -1,4 +1,4 @@
-import { AtSign, Bell, BellOff } from "lucide-react"
+import { BellIcon, EyeNoneIcon, PersonIcon } from "@radix-ui/react-icons"
 
 import {
   Card,
@@ -11,15 +11,15 @@ import {
 export function DemoNotifications() {
   return (
     <Card>
-      <CardHeader>
+      <CardHeader className="pb-3">
         <CardTitle>Notifications</CardTitle>
         <CardDescription>
           Choose what you want to be notified about.
         </CardDescription>
       </CardHeader>
-      <CardContent className="grid gap-1 p-1.5">
-        <div className="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground">
-          <Bell className="h-5 w-5" />
+      <CardContent className="grid gap-1">
+        <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+          <BellIcon className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Everything</p>
             <p className="text-sm text-muted-foreground">
@@ -27,8 +27,8 @@ export function DemoNotifications() {
             </p>
           </div>
         </div>
-        <div className="flex items-center space-x-4 rounded-md bg-accent p-2 text-accent-foreground">
-          <AtSign className="h-5 w-5" />
+        <div className="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
+          <PersonIcon className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Available</p>
             <p className="text-sm text-muted-foreground">
@@ -36,8 +36,8 @@ export function DemoNotifications() {
             </p>
           </div>
         </div>
-        <div className="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground">
-          <BellOff className="h-5 w-5" />
+        <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+          <EyeNoneIcon className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Ignoring</p>
             <p className="text-sm text-muted-foreground">

package/templates/next/src/app/examples/cards/components/payment-method.tsx

@@ -1,5 +1,4 @@
-import { CreditCard } from "lucide-react"
-
+import { Icons } from "@/components/icons"
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -19,7 +18,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { Icons } from "@/components/icons"
 
 export function DemoPaymentMethod() {
   return (
@@ -37,7 +35,19 @@ export function DemoPaymentMethod() {
             className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
           >
             <RadioGroupItem value="card" id="card" className="sr-only" />
-            <CreditCard className="mb-3 h-6 w-6" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              className="mb-3 h-6 w-6"
+            >
+              <rect width="20" height="14" x="2" y="5" rx="2" />
+              <path d="M2 10h20" />
+            </svg>
             Card
           </Label>
           <Label

package/templates/next/src/app/examples/cards/components/report-an-issue.tsx

@@ -49,7 +49,10 @@ export function DemoReportAnIssue() {
           <div className="grid gap-2">
             <Label htmlFor="security-level">Security Level</Label>
             <Select defaultValue="2">
-              <SelectTrigger id="security-level">
+              <SelectTrigger
+                id="security-level"
+                className="line-clamp-1 w-[160px] truncate"
+              >
                 <SelectValue placeholder="Select level" />
               </SelectTrigger>
               <SelectContent>

package/templates/next/src/app/examples/cards/components/share-document.tsx

@@ -1,6 +1,10 @@
 "use client"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import {
   Card,

package/templates/next/src/app/examples/cards/components/team-members.tsx

@@ -1,6 +1,10 @@
-import { ChevronDown } from "lucide-react"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import {
   Card,
@@ -48,7 +52,7 @@ export function DemoTeamMembers() {
             <PopoverTrigger asChild>
               <Button variant="outline" className="ml-auto">
                 Owner{" "}
-                <ChevronDown className="ml-2 h-4 w-4 text-muted-foreground" />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
               </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0" align="end">
@@ -102,7 +106,7 @@ export function DemoTeamMembers() {
             <PopoverTrigger asChild>
               <Button variant="outline" className="ml-auto">
                 Member{" "}
-                <ChevronDown className="ml-2 h-4 w-4 text-muted-foreground" />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
               </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0" align="end">

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

@@ -1,4 +1,5 @@
 import { Metadata } from "next"
+import Image from "next/image"
 
 import { cn } from "@/lib/utils"
 
@@ -11,8 +12,6 @@ import { DemoPaymentMethod } from "./components/payment-method"
 import { DemoReportAnIssue } from "./components/report-an-issue"
 import { DemoShareDocument } from "./components/share-document"
 import { DemoTeamMembers } from "./components/team-members"
-import "./styles.css"
-import Image from "next/image"
 
 export const metadata: Metadata = {
   title: "Cards",
@@ -36,40 +35,42 @@ function DemoContainer({
 
 export default function CardsPage() {
   return (
-    <div className="items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
-      <div className="col-span-2 grid items-start gap-6 lg:col-span-1">
-        <DemoContainer>
-          <DemoCreateAccount />
-        </DemoContainer>
-        <DemoContainer>
-          <DemoPaymentMethod />
-        </DemoContainer>
-      </div>
-      <div className="col-span-2 grid items-start gap-6 lg:col-span-1">
-        <DemoContainer>
-          <DemoTeamMembers />
-        </DemoContainer>
-        <DemoContainer>
-          <DemoShareDocument />
-        </DemoContainer>
-        <DemoContainer>
-          <DemoDatePicker />
-        </DemoContainer>
-        <DemoContainer>
-          <DemoNotifications />
-        </DemoContainer>
-      </div>
-      <div className="col-span-2 grid items-start gap-6 lg:col-span-1 lg:grid-cols-2 xl:grid-cols-1">
-        <DemoContainer>
-          <DemoReportAnIssue />
-        </DemoContainer>
-        <DemoContainer>
-          <DemoGithub />
-        </DemoContainer>
-        <DemoContainer>
-          <DemoCookieSettings />
-        </DemoContainer>
+    <>
+      <div className="items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
+        <div className="col-span-2 grid items-start gap-6 lg:col-span-1">
+          <DemoContainer>
+            <DemoCreateAccount />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoPaymentMethod />
+          </DemoContainer>
+        </div>
+        <div className="col-span-2 grid items-start gap-6 lg:col-span-1">
+          <DemoContainer>
+            <DemoTeamMembers />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoShareDocument />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoDatePicker />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoNotifications />
+          </DemoContainer>
+        </div>
+        <div className="col-span-2 grid items-start gap-6 lg:col-span-1 lg:grid-cols-2 xl:grid-cols-1">
+          <DemoContainer>
+            <DemoReportAnIssue />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoGithub />
+          </DemoContainer>
+          <DemoContainer>
+            <DemoCookieSettings />
+          </DemoContainer>
+        </div>
       </div>
-    </div>
+    </>
   )
 }

package/templates/next/src/app/examples/dashboard/components/date-range-picker.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
+import { CalendarIcon } from "@radix-ui/react-icons"
 import { addDays, format } from "date-fns"
-import { Calendar as CalendarIcon } from "lucide-react"
 import { DateRange } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
@@ -29,9 +29,8 @@ export function CalendarDateRangePicker({
           <Button
             id="date"
             variant={"outline"}
-            size="sm"
             className={cn(
-              "w-[240px] justify-start text-left font-normal",
+              "w-[260px] justify-start text-left font-normal",
               !date && "text-muted-foreground"
             )}
           >

package/templates/next/src/app/examples/dashboard/components/main-nav.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link"
+
 import { cn } from "@/lib/utils"
 
 export function MainNav({
@@ -9,30 +11,30 @@ export function MainNav({
       className={cn("flex items-center space-x-4 lg:space-x-6", className)}
       {...props}
     >
-      <a
+      <Link
         href="/examples/dashboard"
         className="text-sm font-medium transition-colors hover:text-primary"
       >
         Overview
-      </a>
-      <a
+      </Link>
+      <Link
         href="/examples/dashboard"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         Customers
-      </a>
-      <a
+      </Link>
+      <Link
         href="/examples/dashboard"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         Products
-      </a>
-      <a
+      </Link>
+      <Link
         href="/examples/dashboard"
         className="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
       >
         Settings
-      </a>
+      </Link>
     </nav>
   )
 }

package/templates/next/src/app/examples/dashboard/components/recent-sales.tsx

@@ -1,4 +1,8 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
 
 export function RecentSales() {
   return (

package/templates/next/src/app/examples/dashboard/components/search.tsx

@@ -6,7 +6,7 @@ export function Search() {
       <Input
         type="search"
         placeholder="Search..."
-        className="h-9 md:w-[100px] lg:w-[300px]"
+        className="md:w-[100px] lg:w-[300px]"
       />
     </div>
   )