create-tauri-ui 0.1.0

package/templates/next/src/components/examples/textarea/react-hook-form.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import { toast } from "@/components/ui/use-toast"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/react-hook-form/form"
+
+const FormSchema = z.object({
+  bio: z
+    .string()
+    .min(10, {
+      message: "Bio must be at least 10 characters.",
+    })
+    .max(160, {
+      message: "Bio must not be longer than 30 characters.",
+    }),
+})
+
+export function TextareaReactHookForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Bio</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Tell us a little bit about yourself"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>
+                You can <span>@mention</span> other users and organizations.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}

package/templates/next/src/components/examples/textarea/with-button.tsx

@@ -0,0 +1,11 @@
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+
+export function TextareaWithButton() {
+  return (
+    <div className="grid w-full gap-2">
+      <Textarea placeholder="Type your message here." />
+      <Button>Send message</Button>
+    </div>
+  )
+}

package/templates/next/src/components/examples/textarea/with-label.tsx

@@ -0,0 +1,11 @@
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+
+export function TextareaWithLabel() {
+  return (
+    <div className="grid w-full gap-1.5">
+      <Label htmlFor="message">Your message</Label>
+      <Textarea placeholder="Type your message here." id="message" />
+    </div>
+  )
+}

package/templates/next/src/components/examples/textarea/with-text.tsx

@@ -0,0 +1,14 @@
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+
+export function TextareaWithText() {
+  return (
+    <div className="grid w-full gap-1.5">
+      <Label htmlFor="message-2">Your Message</Label>
+      <Textarea placeholder="Type your message here." id="message-2" />
+      <p className="text-sm text-muted-foreground">
+        Your message will be copied to the support team.
+      </p>
+    </div>
+  )
+}

package/templates/next/src/components/examples/toast/demo.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { ToastAction } from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function ToastDemo() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          title: "Scheduled: Catch up ",
+          description: "Friday, February 10, 2023 at 5:57 PM",
+          action: (
+            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
+          ),
+        })
+      }}
+    >
+      Add to calendar
+    </Button>
+  )
+}

package/templates/next/src/components/examples/toast/destructive.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { ToastAction } from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function ToastDestructive() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          variant: "destructive",
+          title: "Uh oh! Something went wrong.",
+          description: "There was a problem with your request.",
+          action: <ToastAction altText="Try again">Try again</ToastAction>,
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}

package/templates/next/src/components/examples/toast/simple.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { useToast } from "@/components/ui/use-toast"
+
+export function ToastSimple() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          description: "Your message has been sent.",
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}

package/templates/next/src/components/examples/toast/with-action.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { ToastAction } from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function ToastWithAction() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          title: "Uh oh! Something went wrong.",
+          description: "There was a problem with your request.",
+          action: <ToastAction altText="Try again">Try again</ToastAction>,
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}

package/templates/next/src/components/examples/toast/with-title.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { useToast } from "@/components/ui/use-toast"
+
+export function ToastWithTitle() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      variant="outline"
+      onClick={() => {
+        toast({
+          title: "Uh oh! Something went wrong.",
+          description: "There was a problem with your request.",
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}

package/templates/next/src/components/examples/toggle/demo.tsx

@@ -0,0 +1,11 @@
+import { Bold } from "lucide-react"
+
+import { Toggle } from "@/components/ui/toggle"
+
+export function ToggleDemo() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Bold className="h-4 w-4" />
+    </Toggle>
+  )
+}

package/templates/next/src/components/examples/toggle/disabled.tsx

@@ -0,0 +1,11 @@
+import { Underline } from "lucide-react"
+
+import { Toggle } from "@/components/ui/toggle"
+
+export function ToggleDisabled() {
+  return (
+    <Toggle aria-label="Toggle italic" disabled>
+      <Underline className="h-4 w-4" />
+    </Toggle>
+  )
+}

package/templates/next/src/components/examples/toggle/lg.tsx

@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/components/ui/toggle"
+
+export function ToggleLg() {
+  return (
+    <Toggle size="lg" aria-label="Toggle italic">
+      <Italic className="h-4 w-4" />
+    </Toggle>
+  )
+}

package/templates/next/src/components/examples/toggle/outline.tsx

@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/components/ui/toggle"
+
+export function ToggleOutline() {
+  return (
+    <Toggle variant="outline" aria-label="Toggle italic">
+      <Italic className="h-4 w-4" />
+    </Toggle>
+  )
+}

package/templates/next/src/components/examples/toggle/sm.tsx

@@ -0,0 +1,11 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/components/ui/toggle"
+
+export function ToggleSm() {
+  return (
+    <Toggle size="sm" aria-label="Toggle italic">
+      <Italic className="h-4 w-4" />
+    </Toggle>
+  )
+}

package/templates/next/src/components/examples/toggle/with-text.tsx

@@ -0,0 +1,12 @@
+import { Italic } from "lucide-react"
+
+import { Toggle } from "@/components/ui/toggle"
+
+export function ToggleWithText() {
+  return (
+    <Toggle aria-label="Toggle italic">
+      <Italic className="mr-2 h-4 w-4" />
+      Italic
+    </Toggle>
+  )
+}

package/templates/next/src/components/examples/tooltip/demo.tsx

@@ -0,0 +1,27 @@
+import { Plus } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+export function TooltipDemo() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline" className="w-10 rounded-full p-0">
+            <Plus className="h-4 w-4" />
+            <span className="sr-only">Add</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Add to library</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

package/templates/next/src/components/examples/typography/blockquote.tsx

@@ -0,0 +1,8 @@
+export function TypographyBlockquote() {
+  return (
+    <blockquote className="mt-6 border-l-2 pl-6 italic">
+      "After all," he said, "everyone enjoys a good joke, so it's only fair that
+      they should pay for the privilege."
+    </blockquote>
+  )
+}

package/templates/next/src/components/examples/typography/demo.tsx

@@ -0,0 +1,119 @@
+export function TypographyDemo() {
+  return (
+    <div>
+      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+        The Joke Tax Chronicles
+      </h1>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        Once upon a time, in a far-off land, there was a very lazy king who
+        spent all day lounging on his throne. One day, his advisors came to him
+        with a problem: the kingdom was running out of money.
+      </p>
+      <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+        The King's Plan
+      </h2>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king thought long and hard, and finally came up with{" "}
+        <a
+          href="#"
+          className="font-medium text-primary underline underline-offset-4"
+        >
+          a brilliant plan
+        </a>
+        : he would tax the jokes in the kingdom.
+      </p>
+      <blockquote className="mt-6 border-l-2 pl-6 italic">
+        "After all," he said, "everyone enjoys a good joke, so it's only fair
+        that they should pay for the privilege."
+      </blockquote>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        The Joke Tax
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king's subjects were not amused. They grumbled and complained, but
+        the king was firm:
+      </p>
+      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+        <li>1st level of puns: 5 gold coins</li>
+        <li>2nd level of jokes: 10 gold coins</li>
+        <li>3rd level of one-liners : 20 gold coins</li>
+      </ul>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        As a result, people stopped telling jokes, and the kingdom fell into a
+        gloom. But there was one person who refused to let the king's
+        foolishness get him down: a court jester named Jokester.
+      </p>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        Jokester's Revolt
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        Jokester began sneaking into the castle in the middle of the night and
+        leaving jokes all over the place: under the king's pillow, in his soup,
+        even in the royal toilet. The king was furious, but he couldn't seem to
+        stop Jokester.
+      </p>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        And then, one day, the people of the kingdom discovered that the jokes
+        left by Jokester were so funny that they couldn't help but laugh. And
+        once they started laughing, they couldn't stop.
+      </p>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        The People's Rebellion
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The people of the kingdom, feeling uplifted by the laughter, started to
+        tell jokes and puns again, and soon the entire kingdom was in on the
+        joke.
+      </p>
+      <div className="my-6 w-full overflow-y-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                King's Treasury
+              </th>
+              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                People's happiness
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Empty
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Overflowing
+              </td>
+            </tr>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Modest
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Satisfied
+              </td>
+            </tr>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Full
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Ecstatic
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king, seeing how much happier his subjects were, realized the error
+        of his ways and repealed the joke tax. Jokester was declared a hero, and
+        the kingdom lived happily ever after.
+      </p>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The moral of the story is: never underestimate the power of a good laugh
+        and always be careful of bad ideas.
+      </p>
+    </div>
+  )
+}

package/templates/next/src/components/examples/typography/h1.tsx

@@ -0,0 +1,7 @@
+export function TypographyH1() {
+  return (
+    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+      Taxing Laughter: The Joke Tax Chronicles
+    </h1>
+  )
+}

package/templates/next/src/components/examples/typography/h2.tsx

@@ -0,0 +1,7 @@
+export function TypographyH2() {
+  return (
+    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+      The People of the Kingdom
+    </h2>
+  )
+}

package/templates/next/src/components/examples/typography/h3.tsx

@@ -0,0 +1,7 @@
+export function TypographyH3() {
+  return (
+    <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+      The Joke Tax
+    </h3>
+  )
+}

package/templates/next/src/components/examples/typography/h4.tsx

@@ -0,0 +1,7 @@
+export function TypographyH4() {
+  return (
+    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+      People stopped telling jokes
+    </h4>
+  )
+}

package/templates/next/src/components/examples/typography/inline-code.tsx

@@ -0,0 +1,7 @@
+export function TypographyInlineCode() {
+  return (
+    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+      @radix-ui/react-alert-dialog
+    </code>
+  )
+}

package/templates/next/src/components/examples/typography/large.tsx

@@ -0,0 +1,5 @@
+export function TypographyLarge() {
+  return (
+    <div className="text-lg font-semibold">Are you sure absolutely sure?</div>
+  )
+}

package/templates/next/src/components/examples/typography/lead.tsx

@@ -0,0 +1,8 @@
+export function TypographyLead() {
+  return (
+    <p className="text-xl text-muted-foreground">
+      A modal dialog that interrupts the user with important content and expects
+      a response.
+    </p>
+  )
+}

package/templates/next/src/components/examples/typography/list.tsx

@@ -0,0 +1,9 @@
+export function TypographyList() {
+  return (
+    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+      <li>1st level of puns: 5 gold coins</li>
+      <li>2nd level of jokes: 10 gold coins</li>
+      <li>3rd level of one-liners : 20 gold coins</li>
+    </ul>
+  )
+}

package/templates/next/src/components/examples/typography/muted.tsx

@@ -0,0 +1,5 @@
+export function TypographyMuted() {
+  return (
+    <p className="text-sm text-muted-foreground">Enter your email address.</p>
+  )
+}

package/templates/next/src/components/examples/typography/p.tsx

@@ -0,0 +1,8 @@
+export function TypographyP() {
+  return (
+    <p className="leading-7 [&:not(:first-child)]:mt-6">
+      The king, seeing how much happier his subjects were, realized the error of
+      his ways and repealed the joke tax.
+    </p>
+  )
+}

package/templates/next/src/components/examples/typography/small.tsx

@@ -0,0 +1,5 @@
+export function TypographySmall() {
+  return (
+    <small className="text-sm font-medium leading-none">Email address</small>
+  )
+}

package/templates/next/src/components/examples/typography/table.tsx

@@ -0,0 +1,44 @@
+export function TypographyTable() {
+  return (
+    <div className="my-6 w-full overflow-y-auto">
+      <table className="w-full">
+        <thead>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+              King's Treasury
+            </th>
+            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+              People's happiness
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Empty
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Overflowing
+            </td>
+          </tr>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Modest
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Satisfied
+            </td>
+          </tr>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Full
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Ecstatic
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}