create-tauri-ui 0.3.2 → 1.0.0

package/templates/sveltekit/src/routes/authentication/UserAuthForm.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import { Icons } from '$components/docs';
-  import { Button } from '$components/ui/button';
-  import { Input } from '$components/ui/input';
-  import { Label } from '$components/ui/label';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-
-  let isLoading = false;
-  async function onSubmit() {
-    isLoading = true;
-
-    setTimeout(() => {
-      isLoading = false;
-    }, 3000);
-  }
-</script>
-
-<div class={cn('grid gap-6', className)} {...$$restProps}>
-  <form on:submit|preventDefault={onSubmit}>
-    <div class="grid gap-2">
-      <div class="grid gap-1">
-        <Label class="sr-only" for="email">Email</Label>
-        <Input
-          id="email"
-          placeholder="name@example.com"
-          type="email"
-          autoCapitalize="none"
-          autoComplete="email"
-          autoCorrect="off"
-          disabled={isLoading}
-        />
-      </div>
-      <Button disabled={isLoading}>
-        {#if isLoading}
-          <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-        {/if}
-        Sign In with Email
-      </Button>
-    </div>
-  </form>
-  <div class="relative">
-    <div class="absolute inset-0 flex items-center">
-      <span class="w-full border-t" />
-    </div>
-    <div class="relative flex justify-center text-xs uppercase">
-      <span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
-    </div>
-  </div>
-  <Button variant="outline" type="button" disabled={isLoading}>
-    {#if isLoading}
-      <Icons.spinner class="mr-2 h-4 w-4 animate-spin" />
-    {:else}
-      <Icons.gitHub class="mr-2 h-4 w-4" />
-    {/if}
-    {' '}
-    Github
-  </Button>
-</div>

package/templates/sveltekit/src/routes/cards/+page.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import DemoCookieSettings from './CookieSettings.svelte';
-  import DemoCreateAccount from './CreateAccount.svelte';
-  import DemoContainer from './DemoContainer.svelte';
-  import DemoNotifications from './Notifications.svelte';
-  import DemoPaymentMethod from './PaymentMethod.svelte';
-</script>
-
-<div class="items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
-  <div class="col-span-3 grid items-start gap-6 lg:col-span-1">
-    <DemoContainer>
-      <DemoCreateAccount />
-    </DemoContainer>
-    <DemoContainer>
-      <DemoNotifications />
-    </DemoContainer>
-  </div>
-  <div class="col-span-3 grid items-start gap-6 lg:col-span-2">
-    <DemoContainer>
-      <DemoPaymentMethod />
-    </DemoContainer>
-    <DemoContainer>
-      <DemoCookieSettings />
-    </DemoContainer>
-  </div>
-</div>

package/templates/sveltekit/src/routes/cards/+page.ts

@@ -1,7 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async () => {
-  return {
-    title: 'Card Example'
-  };
-};

package/templates/sveltekit/src/routes/cards/CookieSettings.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  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';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Cookie Settings</CardTitle>
-    <CardDescription>Manage your cookie settings here.</CardDescription>
-  </CardHeader>
-  <CardContent class="grid gap-6">
-    <div class="flex items-center justify-between space-x-2">
-      <Label for="necessary" class="flex flex-col space-y-1">
-        <span>Strictly Necessary</span>
-        <span class="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 class="flex items-center justify-between space-x-2">
-      <Label for="functional" class="flex flex-col space-y-1">
-        <span>Functional Cookies</span>
-        <span class="font-normal leading-snug text-muted-foreground">
-          These cookies allow the website to provide personalized functionality.
-        </span>
-      </Label>
-      <Switch id="functional" />
-    </div>
-    <div class="flex items-center justify-between space-x-2">
-      <Label for="performance" class="flex flex-col space-y-1">
-        <span>Performance Cookies</span>
-        <span class="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" class="w-full">Save preferences</Button>
-  </CardFooter>
-</Card>

package/templates/sveltekit/src/routes/cards/CreateAccount.svelte

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

package/templates/sveltekit/src/routes/cards/DemoContainer.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<div class={cn('flex items-center justify-center [&>div]:w-full', className)} {...$$restProps}>
-  <slot />
-</div>

package/templates/sveltekit/src/routes/cards/Notifications.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-  import { AtSign, Bell, BellOff } from 'lucide-svelte';
-  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$components/ui/card';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Notifications</CardTitle>
-    <CardDescription>Choose what you want to be notified about.</CardDescription>
-  </CardHeader>
-  <CardContent class="grid gap-1 p-1.5">
-    <div
-      class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
-    >
-      <Bell class="h-5 w-5" />
-      <div class="space-y-1">
-        <p class="text-sm font-medium leading-none">Everything</p>
-        <p class="text-sm text-muted-foreground">Email digest, mentions & all activity.</p>
-      </div>
-    </div>
-    <div class="flex items-center space-x-4 rounded-md bg-accent p-2 text-accent-foreground">
-      <AtSign class="h-5 w-5" />
-      <div class="space-y-1">
-        <p class="text-sm font-medium leading-none">Available</p>
-        <p class="text-sm text-muted-foreground">Only mentions and comments.</p>
-      </div>
-    </div>
-    <div
-      class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
-    >
-      <BellOff class="h-5 w-5" />
-      <div class="space-y-1">
-        <p class="text-sm font-medium leading-none">Ignoring</p>
-        <p class="text-sm text-muted-foreground">Turn off all notifications.</p>
-      </div>
-    </div>
-  </CardContent>
-</Card>

package/templates/sveltekit/src/routes/cards/PaymentMethod.svelte

@@ -1,110 +0,0 @@
-<script lang="ts">
-  import { CreditCard } from 'lucide-svelte';
-  import { Icons } from '$components/docs';
-  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';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Payment Method</CardTitle>
-    <CardDescription>Add a new payment method to your account.</CardDescription>
-  </CardHeader>
-  <CardContent class="grid gap-6">
-    <RadioGroup value="card" class="grid grid-cols-3 gap-4">
-      <Label
-        for="card"
-        class="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" class="sr-only" />
-        <CreditCard class="mb-3 h-6 w-6" />
-        Card
-      </Label>
-      <Label
-        for="paypal"
-        class="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" class="sr-only" />
-        <Icons.paypal class="mb-3 h-6 w-6" />
-        Paypal
-      </Label>
-      <Label
-        for="apple"
-        class="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" class="sr-only" />
-        <Icons.apple class="mb-3 h-6 w-6" />
-        Apple
-      </Label>
-    </RadioGroup>
-    <div class="grid gap-2">
-      <Label for="name">Name</Label>
-      <Input id="name" placeholder="First Last" />
-    </div>
-    <div class="grid gap-2">
-      <Label for="number">Card number</Label>
-      <Input id="number" placeholder="" />
-    </div>
-    <div class="grid grid-cols-3 gap-4">
-      <div class="grid gap-2">
-        <Label for="month">Expires</Label>
-        <Input id="month" placeholder="" />
-        <!-- <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 class="grid gap-2">
-        <Label for="year">Year</Label>
-        <Input id="year" placeholder="" />
-        <!-- <Select>
-					<SelectTrigger id="year">
-						<SelectValue placeholder="Year" />
-					</SelectTrigger>
-					<SelectContent>
-						{#each Array(10) as _, i}}
-							<SelectItem
-								key={i}
-								value={`${new Date().getFullYear() + i}`}
-							>
-								{new Date().getFullYear() + i}
-							</SelectItem>
-						{/each}
-					</SelectContent>
-				</Select> -->
-      </div>
-      <div class="grid gap-2">
-        <Label for="cvc">CVC</Label>
-        <Input id="cvc" placeholder="CVC" />
-      </div>
-    </div>
-  </CardContent>
-  <CardFooter>
-    <Button class="w-full">Continue</Button>
-  </CardFooter>
-</Card>

package/templates/sveltekit/src/routes/cards/ReportAnIssue.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-  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 { Select, SelectContent, SelectTrigger, SelectValue } from '$components/ui/select';
-  import SelectItem from '$components/ui/select/SelectItem.svelte';
-  import { Textarea } from '$components/ui/textarea';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Report an issue</CardTitle>
-    <CardDescription>What area are you having problems with?</CardDescription>
-  </CardHeader>
-  <CardContent class="grid gap-6">
-    <div class="grid grid-cols-2 gap-4">
-      <div class="grid gap-2">
-        <Label for="area">Area</Label>
-        <Select value="billing">
-          <SelectTrigger id="area">
-            <SelectValue placeholder="Select" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="team">Team</SelectItem>
-            <SelectItem value="billing">Billing</SelectItem>
-            <SelectItem value="account">Account</SelectItem>
-            <SelectItem value="deployments">Deployments</SelectItem>
-            <SelectItem value="support">Support</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      <div class="grid gap-2">
-        <Label for="security-level">Security Level</Label>
-        <Select value="2">
-          <SelectTrigger id="security-level">
-            <SelectValue placeholder="Select level" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="1">Severity 1 (Highest)</SelectItem>
-            <SelectItem value="2">Severity 2</SelectItem>
-            <SelectItem value="3">Severity 3</SelectItem>
-            <SelectItem value="4">Severity 4 (Lowest)</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
-    <div class="grid gap-2">
-      <Label for="subject">Subject</Label>
-      <Input id="subject" placeholder="I need help with..." />
-    </div>
-    <div class="grid gap-2">
-      <Label for="description">Description</Label>
-      <Textarea
-        id="description"
-        placeholder="Please include all information relevant to your issue."
-      />
-    </div>
-  </CardContent>
-  <CardFooter class="justify-between space-x-2">
-    <Button variant="ghost">Cancel</Button>
-    <Button>Submit</Button>
-  </CardFooter>
-</Card>

package/templates/sveltekit/src/routes/cards/ShareDocument.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">
-  import { Avatar, AvatarFallback, AvatarImage } from '$components/ui/avatar';
-  import { Button } from '$components/ui/button';
-  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$components/ui/card';
-  import { Input } from '$components/ui/input';
-  import { Select, SelectContent, SelectTrigger, SelectValue } from '$components/ui/select';
-  import SelectItem from '$components/ui/select/SelectItem.svelte';
-  import { Separator } from '$components/ui/separator';
-</script>
-
-<Card>
-  <CardHeader>
-    <CardTitle>Share this document</CardTitle>
-    <CardDescription>Anyone with the link can view this document.</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <div class="flex space-x-2">
-      <Input value="http://example.com/link/to/document" readOnly />
-      <Button variant="secondary" class="shrink-0">Copy Link</Button>
-    </div>
-    <Separator class="my-4" />
-    <div class="space-y-4">
-      <h4 class="text-sm font-medium">People with access</h4>
-      <div class="grid gap-6">
-        <div class="flex items-center justify-between space-x-4">
-          <div class="flex items-center space-x-4">
-            <Avatar>
-              <AvatarImage src="/avatars/03.png" />
-              <AvatarFallback>OM</AvatarFallback>
-            </Avatar>
-            <div>
-              <p class="text-sm font-medium leading-none">Olivia Martin</p>
-              <p class="text-sm text-muted-foreground">m@example.com</p>
-            </div>
-          </div>
-          <Select value="edit">
-            <SelectTrigger class="ml-auto w-[110px]">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="edit">Can edit</SelectItem>
-              <SelectItem value="view">Can view</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div class="flex items-center justify-between space-x-4">
-          <div class="flex items-center space-x-4">
-            <Avatar>
-              <AvatarImage src="/avatars/05.png" />
-              <AvatarFallback>IN</AvatarFallback>
-            </Avatar>
-            <div>
-              <p class="text-sm font-medium leading-none">Isabella Nguyen</p>
-              <p class="text-sm text-muted-foreground">b@example.com</p>
-            </div>
-          </div>
-          <Select value="view">
-            <SelectTrigger class="ml-auto w-[110px]">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="edit">Can edit</SelectItem>
-              <SelectItem value="view">Can view</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <div class="flex items-center justify-between space-x-4">
-          <div class="flex items-center space-x-4">
-            <Avatar>
-              <AvatarImage src="/avatars/01.png" />
-              <AvatarFallback>SD</AvatarFallback>
-            </Avatar>
-            <div>
-              <p class="text-sm font-medium leading-none">Sofia Davis</p>
-              <p class="text-sm text-muted-foreground">p@example.com</p>
-            </div>
-          </div>
-          <Select value="view">
-            <SelectTrigger class="ml-auto w-[110px]">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="edit">Can edit</SelectItem>
-              <SelectItem value="view">Can view</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  </CardContent>
-</Card>

package/templates/sveltekit/src/routes/dashboard/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-  import { DashboardPage } from '$components/docs';
-</script>
-
-<DashboardPage />

package/templates/sveltekit/src/routes/dashboard/+page.ts

@@ -1,7 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async () => {
-  return {
-    title: 'Dashboard Example'
-  };
-};

package/templates/sveltekit/src/routes/music/albums.ts

@@ -1,61 +0,0 @@
-export interface Album {
-  name: string;
-  artist: string;
-  cover: string;
-}
-
-export const listenNowAlbums: Album[] = [
-  {
-    name: 'React Rendezvous',
-    artist: 'Ethan Byte',
-    cover: 'https://images.unsplash.com/photo-1611348586804-61bf6c080437?w=300&dpr=2&q=80'
-  },
-  {
-    name: 'Async Awakenings',
-    artist: 'Nina Netcode',
-    cover: 'https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80'
-  },
-  {
-    name: 'The Art of Reusability',
-    artist: 'Lena Logic',
-    cover: 'https://images.unsplash.com/photo-1528143358888-6d3c7f67bd5d?w=300&dpr=2&q=80'
-  },
-  {
-    name: 'Stateful Symphony',
-    artist: 'Beth Binary',
-    cover: 'https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80'
-  }
-];
-
-export const madeForYouAlbums: Album[] = [
-  {
-    name: 'Thinking Components',
-    artist: 'Lena Logic',
-    cover: 'https://images.unsplash.com/photo-1615247001958-f4bc92fa6a4a?w=300&dpr=2&q=80'
-  },
-  {
-    name: 'Functional Fury',
-    artist: 'Beth Binary',
-    cover: 'https://images.unsplash.com/photo-1513745405825-efaf9a49315f?w=300&dpr=2&q=80'
-  },
-  {
-    name: 'React Rendezvous',
-    artist: 'Ethan Byte',
-    cover: 'https://images.unsplash.com/photo-1614113489855-66422ad300a4?w=300&dpr=2&q=80'
-  },
-  {
-    name: 'Stateful Symphony',
-    artist: 'Beth Binary',
-    cover: 'https://images.unsplash.com/photo-1446185250204-f94591f7d702?w=300&dpr=2&q=80'
-  },
-  {
-    name: 'Async Awakenings',
-    artist: 'Nina Netcode',
-    cover: 'https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80'
-  },
-  {
-    name: 'The Art of Reusability',
-    artist: 'Lena Logic',
-    cover: 'https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80'
-  }
-];

package/templates/sveltekit/src/routes/music/playlists.ts

@@ -1,16 +0,0 @@
-export type Playlist = (typeof playlists)[number];
-
-export const playlists = [
-  'Recently Added',
-  'Recently Played',
-  'Top Songs',
-  'Top Albums',
-  'Top Artists',
-  'Logic Discography',
-  'Bedtime Beats',
-  'Feeling Happy',
-  'I miss Y2K Pop',
-  'Runtober',
-  'Mellow Days',
-  'Eminem Essentials'
-];