create-tauri-ui 0.1.0

package/templates/next/postcss.config.js

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

package/templates/next/prettier.config.js

@@ -0,0 +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",
+  ],
+}

package/templates/next/src/app/examples/authentication/components/user-auth-form.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+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> {}
+
+export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
+  const [isLoading, setIsLoading] = React.useState<boolean>(false)
+
+  async function onSubmit(event: React.SyntheticEvent) {
+    event.preventDefault()
+    setIsLoading(true)
+
+    setTimeout(() => {
+      setIsLoading(false)
+    }, 3000)
+  }
+
+  return (
+    <div className={cn("grid gap-6", className)} {...props}>
+      <form onSubmit={onSubmit}>
+        <div className="grid gap-2">
+          <div className="grid gap-1">
+            <Label className="sr-only" htmlFor="email">
+              Email
+            </Label>
+            <Input
+              id="email"
+              placeholder="name@example.com"
+              type="email"
+              autoCapitalize="none"
+              autoComplete="email"
+              autoCorrect="off"
+              disabled={isLoading}
+            />
+          </div>
+          <Button disabled={isLoading}>
+            {isLoading && (
+              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Sign In with Email
+          </Button>
+        </div>
+      </form>
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+      <Button variant="outline" type="button" disabled={isLoading}>
+        {isLoading ? (
+          <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+        ) : (
+          <Icons.gitHub className="mr-2 h-4 w-4" />
+        )}{" "}
+        Github
+      </Button>
+    </div>
+  )
+}

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

@@ -0,0 +1,80 @@
+import { Metadata } from "next"
+import Image from "next/image"
+import { Command } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+import { UserAuthForm } from "@/app/examples/authentication/components/user-auth-form"
+
+export const metadata: Metadata = {
+  title: "Authentication",
+  description: "Authentication forms built using the components.",
+}
+
+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>
+      </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
+            </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/cookie-settings.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+
+export function DemoCookieSettings() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Cookie Settings</CardTitle>
+        <CardDescription>Manage your cookie settings here.</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <div className="flex items-center justify-between space-x-2">
+          <Label htmlFor="necessary" className="flex flex-col space-y-1">
+            <span>Strictly Necessary</span>
+            <span className="font-normal leading-snug text-muted-foreground">
+              These cookies are essential in order to use the website and use
+              its features.
+            </span>
+          </Label>
+          <Switch id="necessary" defaultChecked />
+        </div>
+        <div className="flex items-center justify-between space-x-2">
+          <Label htmlFor="functional" className="flex flex-col space-y-1">
+            <span>Functional Cookies</span>
+            <span className="font-normal leading-snug text-muted-foreground">
+              These cookies allow the website to provide personalized
+              functionality.
+            </span>
+          </Label>
+          <Switch id="functional" />
+        </div>
+        <div className="flex items-center justify-between space-x-2">
+          <Label htmlFor="performance" className="flex flex-col space-y-1">
+            <span>Performance Cookies</span>
+            <span className="font-normal leading-snug text-muted-foreground">
+              These cookies help to improve the performance of the website.
+            </span>
+          </Label>
+          <Switch id="performance" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          Save preferences
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}

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

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} 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 (
+    <Card>
+      <CardHeader className="space-y-1">
+        <CardTitle className="text-2xl">Create an account</CardTitle>
+        <CardDescription>
+          Enter your email below to create your account
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="grid grid-cols-2 gap-6">
+          <Button variant="outline">
+            <Icons.gitHub className="mr-2 h-4 w-4" />
+            Github
+          </Button>
+          <Button variant="outline">
+            <Icons.google className="mr-2 h-4 w-4" />
+            Google
+          </Button>
+        </div>
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background px-2 text-muted-foreground">
+              Or continue with
+            </span>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="m@example.com" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Create account</Button>
+      </CardFooter>
+    </Card>
+  )
+}

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

@@ -0,0 +1,18 @@
+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 (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="space-y-2">
+          <Label htmlFor="date" className="shrink-0">
+            Pick a date
+          </Label>
+          <CalendarDateRangePicker className="[&>button]:w-[260px]" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,81 @@
+import { ChevronDown, Circle, Plus, Star } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Separator } from "@/components/ui/separator"
+
+export function DemoGithub() {
+  return (
+    <Card>
+      <CardHeader className="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+        <div className="space-y-1">
+          <CardTitle>shadcn/ui</CardTitle>
+          <CardDescription>
+            Beautifully designed components built with Radix UI and Tailwind
+            CSS.
+          </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" />
+            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>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              alignOffset={-5}
+              className="w-[200px]"
+              forceMount
+            >
+              <DropdownMenuLabel>Suggested Lists</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuCheckboxItem checked>
+                Future Ideas
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem>My Stack</DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <Plus className="mr-2 h-4 w-4" /> Create List
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardHeader>
+      <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
+          </div>
+          <div className="flex items-center">
+            <Star className="mr-1 h-3 w-3" />
+            10k
+          </div>
+          <div>Updated April 2023</div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,51 @@
+import { AtSign, Bell, BellOff } from "lucide-react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+export function DemoNotifications() {
+  return (
+    <Card>
+      <CardHeader>
+        <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" />
+          <div className="space-y-1">
+            <p className="text-sm font-medium leading-none">Everything</p>
+            <p className="text-sm text-muted-foreground">
+              Email digest, mentions & all activity.
+            </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="space-y-1">
+            <p className="text-sm font-medium leading-none">Available</p>
+            <p className="text-sm text-muted-foreground">
+              Only mentions and comments.
+            </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="space-y-1">
+            <p className="text-sm font-medium leading-none">Ignoring</p>
+            <p className="text-sm text-muted-foreground">
+              Turn off all notifications.
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,117 @@
+import { CreditCard } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Icons } from "@/components/icons"
+
+export function DemoPaymentMethod() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Payment Method</CardTitle>
+        <CardDescription>
+          Add a new payment method to your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <RadioGroup defaultValue="card" className="grid grid-cols-3 gap-4">
+          <Label
+            htmlFor="card"
+            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" />
+            Card
+          </Label>
+          <Label
+            htmlFor="paypal"
+            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="paypal" id="paypal" className="sr-only" />
+            <Icons.paypal className="mb-3 h-6 w-6" />
+            Paypal
+          </Label>
+          <Label
+            htmlFor="apple"
+            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="apple" id="apple" className="sr-only" />
+            <Icons.apple className="mb-3 h-6 w-6" />
+            Apple
+          </Label>
+        </RadioGroup>
+        <div className="grid gap-2">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" placeholder="First Last" />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="number">Card number</Label>
+          <Input id="number" placeholder="" />
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          <div className="grid gap-2">
+            <Label htmlFor="month">Expires</Label>
+            <Select>
+              <SelectTrigger id="month">
+                <SelectValue placeholder="Month" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">January</SelectItem>
+                <SelectItem value="2">February</SelectItem>
+                <SelectItem value="3">March</SelectItem>
+                <SelectItem value="4">April</SelectItem>
+                <SelectItem value="5">May</SelectItem>
+                <SelectItem value="6">June</SelectItem>
+                <SelectItem value="7">July</SelectItem>
+                <SelectItem value="8">August</SelectItem>
+                <SelectItem value="9">September</SelectItem>
+                <SelectItem value="10">October</SelectItem>
+                <SelectItem value="11">November</SelectItem>
+                <SelectItem value="12">December</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="year">Year</Label>
+            <Select>
+              <SelectTrigger id="year">
+                <SelectValue placeholder="Year" />
+              </SelectTrigger>
+              <SelectContent>
+                {Array.from({ length: 10 }, (_, i) => (
+                  <SelectItem key={i} value={`${new Date().getFullYear() + i}`}>
+                    {new Date().getFullYear() + i}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="cvc">CVC</Label>
+            <Input id="cvc" placeholder="CVC" />
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Continue</Button>
+      </CardFooter>
+    </Card>
+  )
+}