create-tauri-ui 0.1.0

package/templates/next/src/components/examples/date-picker/with-presets.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+export function DatePickerWithPresets() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground"
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="flex w-auto flex-col space-y-2 p-2">
+        <Select
+          onValueChange={(value) =>
+            setDate(addDays(new Date(), parseInt(value)))
+          }
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select" />
+          </SelectTrigger>
+          <SelectContent position="popper">
+            <SelectItem value="0">Today</SelectItem>
+            <SelectItem value="1">Tomorrow</SelectItem>
+            <SelectItem value="3">In 3 days</SelectItem>
+            <SelectItem value="7">In a week</SelectItem>
+          </SelectContent>
+        </Select>
+        <div className="rounded-md border">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { addDays, format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import { DateRange } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+export function DatePickerWithRange({
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  })
+
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn(
+              "w-[300px] justify-start text-left font-normal",
+              !date && "text-muted-foreground"
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} -{" "}
+                  {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/templates/next/src/components/examples/dropdown-menu/checkboxes.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+type Checked = DropdownMenuCheckboxItemProps["checked"]
+
+export function DropdownMenuCheckboxes() {
+  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
+  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
+  const [showPanel, setShowPanel] = React.useState<Checked>(false)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem
+          checked={showStatusBar}
+          onCheckedChange={setShowStatusBar}
+        >
+          Status Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showActivityBar}
+          onCheckedChange={setShowActivityBar}
+          disabled
+        >
+          Activity Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showPanel}
+          onCheckedChange={setShowPanel}
+        >
+          Panel
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/templates/next/src/components/examples/dropdown-menu/demo.tsx

@@ -0,0 +1,122 @@
+import {
+  Cloud,
+  CreditCard,
+  Github,
+  Keyboard,
+  LifeBuoy,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Plus,
+  PlusCircle,
+  Settings,
+  User,
+  UserPlus,
+  Users,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function DropdownMenuDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard className="mr-2 h-4 w-4" />
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Keyboard className="mr-2 h-4 w-4" />
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Users className="mr-2 h-4 w-4" />
+            <span>Team</span>
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <UserPlus className="mr-2 h-4 w-4" />
+              <span>Invite users</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>
+                  <Mail className="mr-2 h-4 w-4" />
+                  <span>Email</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <MessageSquare className="mr-2 h-4 w-4" />
+                  <span>Message</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  <span>More...</span>
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            <Plus className="mr-2 h-4 w-4" />
+            <span>New Team</span>
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Github className="mr-2 h-4 w-4" />
+          <span>GitHub</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <LifeBuoy className="mr-2 h-4 w-4" />
+          <span>Support</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>
+          <Cloud className="mr-2 h-4 w-4" />
+          <span>API</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Log out</span>
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/templates/next/src/components/examples/dropdown-menu/radio-group.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function DropdownMenuRadioGroupDemo() {
+  const [position, setPosition] = React.useState("bottom")
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/templates/next/src/components/examples/hover-card/demo.tsx

@@ -0,0 +1,39 @@
+import { CalendarDays } from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
+
+export function HoverCardDemo() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="link">@nextjs</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span className="text-xs text-muted-foreground">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}

package/templates/next/src/components/examples/index.tsx

@@ -0,0 +1,213 @@
+import { AccordionDemo } from "@/components/examples/accordion/demo"
+import { AlertDialogDemo } from "@/components/examples/alert-dialog/demo"
+import { AlertDemo } from "@/components/examples/alert/demo"
+import { AlertDestructive } from "@/components/examples/alert/destructive"
+import { AspectRatioDemo } from "@/components/examples/aspect-ratio/demo"
+import { AvatarDemo } from "@/components/examples/avatar/demo"
+import { BadgeDemo } from "@/components/examples/badge/demo"
+import { BadgeDestructive } from "@/components/examples/badge/destructive"
+import { BadgeOutline } from "@/components/examples/badge/outline"
+import { BadgeSecondary } from "@/components/examples/badge/secondary"
+import { ButtonAsChild } from "@/components/examples/button/as-child"
+import { ButtonDemo } from "@/components/examples/button/demo"
+import { ButtonDestructive } from "@/components/examples/button/destructive"
+import { ButtonGhost } from "@/components/examples/button/ghost"
+import { ButtonLink } from "@/components/examples/button/link"
+import { ButtonLoading } from "@/components/examples/button/loading"
+import { ButtonOutline } from "@/components/examples/button/outline"
+import { ButtonSecondary } from "@/components/examples/button/secondary"
+import { ButtonWithIcon } from "@/components/examples/button/with-icon"
+import { CalendarDemo } from "@/components/examples/calendar/demo"
+import { CalendarReactHookForm } from "@/components/examples/calendar/react-hook-form"
+import { CardDemo } from "@/components/examples/card/demo"
+import { CardWithForm } from "@/components/examples/card/with-form"
+import { CheckboxDemo } from "@/components/examples/checkbox/demo"
+import { CheckboxDisabled } from "@/components/examples/checkbox/disabled"
+import { CheckboxReactHookFormMultiple } from "@/components/examples/checkbox/react-hook-form-multiple"
+import { CheckboxReactHookFormSingle } from "@/components/examples/checkbox/react-hook-form-single"
+import { CheckboxWithText } from "@/components/examples/checkbox/with-text"
+import { CollapsibleDemo } from "@/components/examples/collapsible/demo"
+import { ComboboxDemo } from "@/components/examples/combobox/demo"
+import { ComboboxDropdownMenu } from "@/components/examples/combobox/dropdown-menu"
+import { ComboboxPopover } from "@/components/examples/combobox/popover"
+import { ComboboxReactHookForm } from "@/components/examples/combobox/react-hook-form"
+import { CommandDemo } from "@/components/examples/command/demo"
+import { CommandDialogDemo } from "@/components/examples/command/dialog"
+import { ContextMenuDemo } from "@/components/examples/context-menu/demo"
+import { DataTableDemo } from "@/components/examples/data-table/demo"
+import { DatePickerDemo } from "@/components/examples/date-picker/demo"
+import { DatePickerReactHookForm } from "@/components/examples/date-picker/react-hook-form"
+import { DatePickerWithPresets } from "@/components/examples/date-picker/with-presets"
+import { DatePickerWithRange } from "@/components/examples/date-picker/with-range"
+import { DialogDemo } from "@/components/examples/dialog/demo"
+import { DropdownMenuCheckboxes } from "@/components/examples/dropdown-menu/checkboxes"
+import { DropdownMenuDemo } from "@/components/examples/dropdown-menu/demo"
+import { DropdownMenuRadioGroupDemo } from "@/components/examples/dropdown-menu/radio-group"
+import { HoverCardDemo } from "@/components/examples/hover-card/demo"
+import { InputDemo } from "@/components/examples/input/demo"
+import { InputDisabled } from "@/components/examples/input/disabled"
+import { InputFile } from "@/components/examples/input/file"
+import { InputReactHookForm } from "@/components/examples/input/react-hook-form"
+import { InputWithButton } from "@/components/examples/input/with-button"
+import { InputWithLabel } from "@/components/examples/input/with-label"
+import { InputWithText } from "@/components/examples/input/with-text"
+import { LabelDemo } from "@/components/examples/label/demo"
+import { MenubarDemo } from "@/components/examples/menubar/demo"
+import { NavigationMenuDemo } from "@/components/examples/navigation-menu/demo"
+import { PopoverDemo } from "@/components/examples/popover/demo"
+import { ProgressDemo } from "@/components/examples/progress/demo"
+import { RadioGroupDemo } from "@/components/examples/radio-group/demo"
+import { RadioGroupReactHookForm } from "@/components/examples/radio-group/react-hook-form"
+import { ScrollAreaDemo } from "@/components/examples/scroll-area/demo"
+import { SelectDemo } from "@/components/examples/select/demo"
+import { SelectReactHookForm } from "@/components/examples/select/react-hook-form"
+import { SeparatorDemo } from "@/components/examples/separator/demo"
+import { SheetDemo } from "@/components/examples/sheet/demo"
+import { SheetPosition } from "@/components/examples/sheet/position"
+import { SheetSize } from "@/components/examples/sheet/size"
+import { SkeletonDemo } from "@/components/examples/skeleton/demo"
+import { SliderDemo } from "@/components/examples/slider/demo"
+import { SwitchDemo } from "@/components/examples/switch/demo"
+import { SwitchReactHookForm } from "@/components/examples/switch/react-hook-form"
+import { TableDemo } from "@/components/examples/table/demo"
+import { TabsDemo } from "@/components/examples/tabs/demo"
+import { TextareaDemo } from "@/components/examples/textarea/demo"
+import { TextareaDisabled } from "@/components/examples/textarea/disabled"
+import { TextareaReactHookForm } from "@/components/examples/textarea/react-hook-form"
+import { TextareaWithButton } from "@/components/examples/textarea/with-button"
+import { TextareaWithLabel } from "@/components/examples/textarea/with-label"
+import { TextareaWithText } from "@/components/examples/textarea/with-text"
+import { ToastDemo } from "@/components/examples/toast/demo"
+import { ToastDestructive } from "@/components/examples/toast/destructive"
+import { ToastSimple } from "@/components/examples/toast/simple"
+import { ToastWithAction } from "@/components/examples/toast/with-action"
+import { ToastWithTitle } from "@/components/examples/toast/with-title"
+import { ToggleDemo } from "@/components/examples/toggle/demo"
+import { ToggleDisabled } from "@/components/examples/toggle/disabled"
+import { ToggleLg } from "@/components/examples/toggle/lg"
+import { ToggleOutline } from "@/components/examples/toggle/outline"
+import { ToggleSm } from "@/components/examples/toggle/sm"
+import { ToggleWithText } from "@/components/examples/toggle/with-text"
+import { TooltipDemo } from "@/components/examples/tooltip/demo"
+import { TypographyBlockquote } from "@/components/examples/typography/blockquote"
+import { TypographyDemo } from "@/components/examples/typography/demo"
+import { TypographyH1 } from "@/components/examples/typography/h1"
+import { TypographyH2 } from "@/components/examples/typography/h2"
+import { TypographyH3 } from "@/components/examples/typography/h3"
+import { TypographyH4 } from "@/components/examples/typography/h4"
+import { TypographyInlineCode } from "@/components/examples/typography/inline-code"
+import { TypographyLarge } from "@/components/examples/typography/large"
+import { TypographyLead } from "@/components/examples/typography/lead"
+import { TypographyList } from "@/components/examples/typography/list"
+import { TypographyMuted } from "@/components/examples/typography/muted"
+import { TypographyP } from "@/components/examples/typography/p"
+import { TypographySmall } from "@/components/examples/typography/small"
+import { TypographyTable } from "@/components/examples/typography/table"
+
+export const examples = {
+  AccordionDemo,
+  AlertDemo,
+  AlertDialogDemo,
+  AlertDestructive,
+  AspectRatioDemo,
+  AvatarDemo,
+  BadgeDemo,
+  BadgeDestructive,
+  BadgeOutline,
+  BadgeSecondary,
+  ButtonDemo,
+  ButtonGhost,
+  ButtonDestructive,
+  ButtonLink,
+  ButtonLoading,
+  ButtonOutline,
+  ButtonSecondary,
+  ButtonWithIcon,
+  ButtonAsChild,
+  CalendarDemo,
+  CalendarReactHookForm,
+  DataTableDemo,
+  DatePickerDemo,
+  DatePickerWithRange,
+  DatePickerWithPresets,
+  DatePickerReactHookForm,
+  CardDemo,
+  CardWithForm,
+  CheckboxDemo,
+  CheckboxDisabled,
+  CheckboxWithText,
+  CheckboxReactHookFormMultiple,
+  CheckboxReactHookFormSingle,
+  CollapsibleDemo,
+  CommandDemo,
+  CommandDialogDemo,
+  ComboboxDemo,
+  ComboboxPopover,
+  ComboboxDropdownMenu,
+  ComboboxReactHookForm,
+  ContextMenuDemo,
+  DialogDemo,
+  DropdownMenuCheckboxes,
+  DropdownMenuDemo,
+  DropdownMenuRadioGroupDemo,
+  HoverCardDemo,
+  InputDemo,
+  InputDisabled,
+  InputFile,
+  InputWithButton,
+  InputWithLabel,
+  InputWithText,
+  InputReactHookForm,
+  LabelDemo,
+  MenubarDemo,
+  NavigationMenuDemo,
+  PopoverDemo,
+  ProgressDemo,
+  RadioGroupDemo,
+  RadioGroupReactHookForm,
+  ScrollAreaDemo,
+  SelectDemo,
+  SelectReactHookForm,
+  SeparatorDemo,
+  SheetDemo,
+  SheetSize,
+  SheetPosition,
+  SkeletonDemo,
+  SliderDemo,
+  SwitchDemo,
+  SwitchReactHookForm,
+  TableDemo,
+  TabsDemo,
+  TextareaDemo,
+  TextareaDisabled,
+  TextareaWithButton,
+  TextareaWithLabel,
+  TextareaWithText,
+  TextareaReactHookForm,
+  ToastDemo,
+  ToastDestructive,
+  ToastSimple,
+  ToastWithTitle,
+  ToastWithAction,
+  TooltipDemo,
+  TypographyBlockquote,
+  TypographyDemo,
+  TypographyH1,
+  TypographyH2,
+  TypographyH3,
+  TypographyH4,
+  TypographyInlineCode,
+  TypographyLarge,
+  TypographyLead,
+  TypographyList,
+  TypographyP,
+  TypographySmall,
+  TypographyMuted,
+  TypographyTable,
+  ToggleDemo,
+  ToggleSm,
+  ToggleLg,
+  ToggleOutline,
+  ToggleDisabled,
+  ToggleWithText,
+}

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

@@ -0,0 +1,5 @@
+import { Input } from "@/components/ui/input"
+
+export function InputDemo() {
+  return <Input type="email" placeholder="Email" />
+}

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

@@ -0,0 +1,5 @@
+import { Input } from "@/components/ui/input"
+
+export function InputDisabled() {
+  return <Input disabled type="email" placeholder="Email" />
+}

package/templates/next/src/components/examples/input/file.tsx

@@ -0,0 +1,11 @@
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export function InputFile() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="picture">Picture</Label>
+      <Input id="picture" type="file" />
+    </div>
+  )
+}