create-tauri-ui 0.1.2 → 0.1.4

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

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

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

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

@@ -0,0 +1,44 @@
+<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="md:hidden">
+  <img
+    src="/examples/cards-light.png"
+    width={1280}
+    height={1214}
+    alt="Cards"
+    class="block dark:hidden"
+  />
+  <img
+    src="/examples/cards-dark.png"
+    width={1280}
+    height={1214}
+    alt="Cards"
+    class="hidden dark:block"
+  />
+</div>
+<div
+  class="hidden 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+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'
+];