create-tauri-ui 0.1.5 → 0.2.1

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

@@ -1,77 +0,0 @@
-"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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,26 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-"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

@@ -1,24 +0,0 @@
-"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

@@ -1,22 +0,0 @@
-"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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,119 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,44 +0,0 @@
-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>
-  )
-}