create-tauri-ui 0.1.3 → 0.1.5

package/templates/sveltekit/src/lib/components/docs/examples/card/CardDemo.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { BellRing, Check } from 'lucide-svelte';
+  import { Button } from '$components/ui/button';
+  import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle
+  } from '$components/ui/card';
+  import { Switch } from '$components/ui/switch';
+
+  const notifications = [
+    {
+      title: 'Your call has been confirmed.',
+      description: '1 hour ago'
+    },
+    {
+      title: 'You have a new message!',
+      description: '1 hour ago'
+    },
+    {
+      title: 'Your subscription is expiring soon!',
+      description: '2 hours ago'
+    }
+  ];
+</script>
+
+<Card class="w-[380px]">
+  <CardHeader>
+    <CardTitle>Notifications</CardTitle>
+    <CardDescription>You have 3 unread messages.</CardDescription>
+  </CardHeader>
+  <CardContent class="grid gap-4">
+    <div class=" flex items-center space-x-4 rounded-md border p-4">
+      <BellRing />
+      <div class="flex-1 space-y-1">
+        <p class="text-sm font-medium leading-none">Push Notifications</p>
+        <p class="text-sm text-muted-foreground">Send notifications to device.</p>
+      </div>
+      <Switch />
+    </div>
+    <div>
+      {#each notifications as notification, idx (idx)}
+        <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+          <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">
+              {notification.title}
+            </p>
+            <p class="text-sm text-muted-foreground">
+              {notification.description}
+            </p>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </CardContent>
+  <CardFooter>
+    <Button class="w-full">
+      <Check class="mr-2 h-4 w-4" /> Mark all as read
+    </Button>
+  </CardFooter>
+</Card>

package/templates/sveltekit/src/lib/components/docs/examples/card/index.ts

@@ -0,0 +1,2 @@
+export { default as CardDemo } from './CardDemo.svelte';
+export { default as CardDemoForm } from './CardDemoForm.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/checkbox/CheckboxDemo.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Checkbox } from '$components/ui/checkbox';
+</script>
+
+<div class="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <label
+    for="terms"
+    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  >
+    Accept terms and conditions
+  </label>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/checkbox/CheckboxDemoDisabled.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Checkbox } from '$components/ui/checkbox';
+</script>
+
+<div class="flex items-center space-x-2">
+  <Checkbox id="terms" disabled />
+  <label
+    for="terms2"
+    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  >
+    Accept terms and conditions
+  </label>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/checkbox/CheckboxDemoText.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Checkbox } from '$components/ui/checkbox';
+</script>
+
+<div class="items-top flex space-x-2">
+  <Checkbox id="terms1" />
+  <div class="grid gap-1.5 leading-none">
+    <label
+      for="terms1"
+      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    >
+      Accept terms and conditions
+    </label>
+    <p class="text-sm text-muted-foreground">
+      You agree to our Terms of Service and Privacy Policy.
+    </p>
+  </div>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/checkbox/index.ts

@@ -0,0 +1,3 @@
+export { default as CheckboxDemo } from './CheckboxDemo.svelte';
+export { default as CheckboxDemoDisabled } from './CheckboxDemoDisabled.svelte';
+export { default as CheckboxDemoText } from './CheckboxDemoText.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/collapsible/CollapsibleDemo.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { ChevronsUpDown } from 'lucide-svelte';
+  import { Button } from '$components/ui/button';
+  import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '$components/ui/collapsible';
+
+  let isOpen = false;
+</script>
+
+<Collapsible open={isOpen} class="w-[350px] space-y-2">
+  <div class="flex items-center justify-between space-x-4 px-4">
+    <h4 class="text-sm font-semibold">@thomasglopes starred 3 repositories</h4>
+    <CollapsibleTrigger>
+      <Button variant="ghost" size="sm" class="w-9 p-0">
+        <ChevronsUpDown class="h-4 w-4" />
+        <span class="sr-only">Toggle</span>
+      </Button>
+    </CollapsibleTrigger>
+  </div>
+  <div class="rounded-md border px-4 py-3 font-mono text-sm">tglide/radix-svelte</div>
+  <CollapsibleContent class="space-y-2">
+    <div class="rounded-md border px-4 py-3 font-mono text-sm">sveltejs/svelte</div>
+    <div class="rounded-md border px-4 py-3 font-mono text-sm">sveltejs/kit</div>
+  </CollapsibleContent>
+</Collapsible>

package/templates/sveltekit/src/lib/components/docs/examples/collapsible/index.ts

@@ -0,0 +1 @@
+export { default as CollapsibleDemo } from './CollapsibleDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/dialog/DialogDemo.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  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';
+</script>
+
+<Dialog modal={true}>
+  <DialogTrigger>
+    <Button variant="outline">Edit Profile</Button>
+  </DialogTrigger>
+  <DialogContent class="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 class="grid gap-4 py-4">
+      <div class="grid grid-cols-4 items-center gap-4">
+        <Label class="text-right">Name</Label>
+        <Input id="name" value="Pedro Duarte" class="col-span-3" />
+      </div>
+      <div class="grid grid-cols-4 items-center gap-4">
+        <Label class="text-right">Username</Label>
+        <Input id="username" value="@peduarte" class="col-span-3" />
+      </div>
+    </div>
+    <DialogFooter>
+      <Button type="submit">Save changes</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>

package/templates/sveltekit/src/lib/components/docs/examples/dialog/index.ts

@@ -0,0 +1 @@
+export { default as DialogDemo } from './DialogDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/hover-card/HoverCardDemo.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { CalendarDays } from 'lucide-svelte';
+  import { Avatar, AvatarFallback, AvatarImage } from '$components/ui/avatar';
+  import { Button } from '$components/ui/button';
+  import { HoverCard, HoverCardContent, HoverCardTrigger } from '$components/ui/hover-card';
+</script>
+
+<HoverCard>
+  <HoverCardTrigger>
+    <Button variant="link">@sveltejs</Button>
+  </HoverCardTrigger>
+  <HoverCardContent class="w-80">
+    <div class="flex justify-between space-x-4">
+      <Avatar>
+        <AvatarImage src="https://github.com/sveltejs.png" />
+        <AvatarFallback>SK</AvatarFallback>
+      </Avatar>
+      <div class="space-y-1">
+        <h4 class="text-sm font-semibold">@sveltejs</h4>
+        <p class="text-sm">Cybernetically enhanced web apps.</p>
+        <div class="flex items-center pt-2">
+          <CalendarDays class="mr-2 h-4 w-4 opacity-70" />{' '}
+          <span class="text-xs text-muted-foreground"> Joined September 2022 </span>
+        </div>
+      </div>
+    </div>
+  </HoverCardContent>
+</HoverCard>

package/templates/sveltekit/src/lib/components/docs/examples/hover-card/index.ts

@@ -0,0 +1 @@
+export { default as HoverCardDemo } from './HoverCardDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/index.ts

@@ -0,0 +1,27 @@
+export * from './accordion';
+export * from './alert';
+export * from './alert-dialog';
+export * from './aspect-ratio';
+export * from './avatar';
+export * from './badge';
+export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './collapsible';
+export * from './dialog';
+export * from './input';
+export * from './label';
+export * from './progress';
+export * from './separator';
+export * from './switch';
+export * from './table';
+export * from './tabs';
+export * from './textarea';
+export * from './toggle';
+export * from './hover-card';
+export * from './radio-group';
+export * from './slider';
+export * from './skeleton';
+export * from './typography';
+export * from './tooltip';
+export * from './sheet';

package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemo.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Input } from '$components/ui/input';
+</script>
+
+<Input type="email" placeholder="email" />

package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoButton.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+  import { Input } from '$components/ui/input';
+</script>
+
+<form class="flex w-full max-w-sm items-center space-x-2">
+  <Input type="email" placeholder="email" />
+  <Button type="submit">Subscribe</Button>
+</form>

package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoDisabled.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Input } from '$components/ui/input';
+</script>
+
+<Input disabled type="email" placeholder="email" />

package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoFile.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Input } from '$components/ui/input';
+  import { Label } from '$components/ui/label';
+</script>
+
+<div class="grid w-full max-w-sm items-center gap-1.5">
+  <Label for="picture">Picture</Label>
+  <Input id="picture" type="file" />
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoLabel.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Input } from '$components/ui/input';
+  import { Label } from '$components/ui/label';
+</script>
+
+<div class="grid w-full max-w-sm items-center gap-1.5">
+  <Label for="email">Email</Label>
+  <Input type="email" id="email" placeholder="email" />
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/input/InputDemoText.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Input } from '$components/ui/input';
+  import { Label } from '$components/ui/label';
+</script>
+
+<div class="grid w-full max-w-sm items-center gap-1.5">
+  <Label for="email-2">Email</Label>
+  <Input type="email" id="email-2" placeholder="Email" />
+  <p class="text-sm text-muted-foreground">Enter your email address.</p>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/input/index.ts

@@ -0,0 +1,6 @@
+export { default as InputDemo } from './InputDemo.svelte';
+export { default as InputDemoButton } from './InputDemoButton.svelte';
+export { default as InputDemoDisabled } from './InputDemoDisabled.svelte';
+export { default as InputDemoFile } from './InputDemoFile.svelte';
+export { default as InputDemoLabel } from './InputDemoLabel.svelte';
+export { default as InputDemoText } from './InputDemoText.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/label/LabelDemo.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Checkbox } from '$components/ui/checkbox';
+  import { Label } from '$components/ui/label';
+</script>
+
+<div>
+  <div class="flex items-center space-x-2">
+    <Checkbox id="terms" />
+    <Label for="terms">Accept terms and conditions</Label>
+  </div>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/label/index.ts

@@ -0,0 +1 @@
+export { default as LabelDemo } from './LabelDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/progress/ProgressDemo.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Progress } from '$components/ui/progress';
+
+  let progress = 13;
+  onMount(() => {
+    const timer = setTimeout(() => (progress = 66), 500);
+    return () => clearTimeout(timer);
+  });
+</script>
+
+<Progress value={progress} max={100} />

package/templates/sveltekit/src/lib/components/docs/examples/progress/index.ts

@@ -0,0 +1 @@
+export { default as ProgressDemo } from './ProgressDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/radio-group/RadioGroupDemo.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Label } from '$components/ui/label';
+  import { RadioGroup, RadioGroupItem } from '$components/ui/radio-group';
+</script>
+
+<RadioGroup value="comfortable">
+  <div class="flex items-center space-x-2">
+    <RadioGroupItem value="default" id="r1" />
+    <Label for="r1">Default</Label>
+  </div>
+  <div class="flex items-center space-x-2">
+    <RadioGroupItem value="comfortable" id="r2" />
+    <Label for="r2">Comfortable</Label>
+  </div>
+  <div class="flex items-center space-x-2">
+    <RadioGroupItem value="compact" id="r3" />
+    <Label for="r3">Compact</Label>
+  </div>
+</RadioGroup>

package/templates/sveltekit/src/lib/components/docs/examples/radio-group/index.ts

@@ -0,0 +1 @@
+export { default as RadioGroupDemo } from './RadioGroupDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/separator/SeparatorDemo.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Separator } from '$components/ui/separator';
+</script>
+
+<div>
+  <div class="space-y-1">
+    <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
+    <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
+  </div>
+  <Separator class="my-4" />
+  <div class="flex h-5 items-center space-x-4 text-sm">
+    <div>Blog</div>
+    <Separator orientation="vertical" />
+    <div>Docs</div>
+    <Separator orientation="vertical" />
+    <div>Source</div>
+  </div>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/separator/index.ts

@@ -0,0 +1 @@
+export { default as SeparatorDemo } from './SeparatorDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/sheet/SheetDemo.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+  import { Input } from '$components/ui/input';
+  import { Label } from '$components/ui/label';
+  import {
+    Sheet,
+    SheetClose,
+    SheetContent,
+    SheetDescription,
+    SheetFooter,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger
+  } from '$components/ui/sheet';
+</script>
+
+<Sheet>
+  <SheetTrigger>
+    <Button variant="outline">Open</Button>
+  </SheetTrigger>
+  <SheetContent position="right" size="sm">
+    <SheetHeader>
+      <SheetTitle>Edit profile</SheetTitle>
+      <SheetDescription>
+        Make changes to your profile here. Click save when you're done.
+      </SheetDescription>
+    </SheetHeader>
+    <div class="grid gap-4 py-4">
+      <div class="grid grid-cols-4 items-center gap-4">
+        <Label for="name" class="text-right">Name</Label>
+        <Input id="name" value="Pedro Duarte" class="col-span-3" />
+      </div>
+      <div class="grid grid-cols-4 items-center gap-4">
+        <Label for="username" class="text-right">Username</Label>
+        <Input id="username" value="@peduarte" class="col-span-3" />
+      </div>
+    </div>
+    <SheetFooter>
+      <SheetClose>
+        <Button type="submit">Save changes</Button>
+      </SheetClose>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>

package/templates/sveltekit/src/lib/components/docs/examples/sheet/SheetPositionDemo.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+  import { Input } from '$components/ui/input';
+  import { Label } from '$components/ui/label';
+  import { RadioGroup, RadioGroupItem } from '$components/ui/radio-group';
+  import {
+    Sheet,
+    SheetClose,
+    SheetContent,
+    SheetDescription,
+    SheetFooter,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger
+  } from '$components/ui/sheet';
+
+  const SHEET_POSITIONS = ['top', 'right', 'bottom', 'left'] as const;
+
+  type SheetPosition = (typeof SHEET_POSITIONS)[number];
+  let position: SheetPosition = 'right';
+</script>
+
+<div class="flex flex-col space-y-8">
+  <RadioGroup bind:value={position}>
+    <div class="grid grid-cols-2 gap-2">
+      {#each SHEET_POSITIONS as position, index (index)}
+        <div class="flex items-center space-x-2">
+          <RadioGroupItem value={position} id={position} />
+          <Label for={position}>{position}</Label>
+        </div>
+      {/each}
+    </div>
+  </RadioGroup>
+  <Sheet>
+    <SheetTrigger>
+      <Button>Open {position} sheet</Button>
+    </SheetTrigger>
+    <SheetContent {position} size="content">
+      <SheetHeader>
+        <SheetTitle>Edit profile</SheetTitle>
+        <SheetDescription>
+          Make changes to your profile here. Click save when you're done.
+        </SheetDescription>
+      </SheetHeader>
+      <div class="grid gap-4 py-4">
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="name" class="text-right">Name</Label>
+          <Input id="name" value="Pedro Duarte" class="col-span-3" />
+        </div>
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="username" class="text-right">Username</Label>
+          <Input id="username" value="@peduarte" class="col-span-3" />
+        </div>
+      </div>
+      <SheetFooter>
+        <SheetClose>
+          <Button type="submit">Save changes</Button>
+        </SheetClose>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/sheet/SheetSizeDemo.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+  import { Input } from '$components/ui/input';
+  import { Label } from '$components/ui/label';
+  import { RadioGroup, RadioGroupItem } from '$components/ui/radio-group';
+  import {
+    Sheet,
+    SheetClose,
+    SheetContent,
+    SheetDescription,
+    SheetFooter,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger
+  } from '$components/ui/sheet';
+
+  const SHEET_SIZES = ['sm', 'default', 'lg', 'xl', 'full', 'content'] as const;
+
+  type SheetSize = (typeof SHEET_SIZES)[number];
+  let size: SheetSize = 'default';
+</script>
+
+<div class="flex flex-col space-y-8">
+  <RadioGroup bind:value={size}>
+    <div class="grid grid-cols-2 gap-2">
+      {#each SHEET_SIZES as size, index (index)}
+        <div class="flex items-center space-x-2">
+          <RadioGroupItem value={size} id={size} />
+          <Label for={size}>{size}</Label>
+        </div>
+      {/each}
+    </div>
+  </RadioGroup>
+  <Sheet>
+    <SheetTrigger>
+      <Button>Open {size} sheet</Button>
+    </SheetTrigger>
+    <SheetContent position="right" {size}>
+      <SheetHeader>
+        <SheetTitle>Edit profile</SheetTitle>
+        <SheetDescription>
+          Make changes to your profile here. Click save when you're done.
+        </SheetDescription>
+      </SheetHeader>
+      <div class="grid gap-4 py-4">
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="name" class="text-right">Name</Label>
+          <Input id="name" value="Pedro Duarte" class="col-span-3" />
+        </div>
+        <div class="grid grid-cols-4 items-center gap-4">
+          <Label for="username" class="text-right">Username</Label>
+          <Input id="username" value="@peduarte" class="col-span-3" />
+        </div>
+      </div>
+      <SheetFooter>
+        <SheetClose>
+          <Button type="submit">Save changes</Button>
+        </SheetClose>
+      </SheetFooter>
+    </SheetContent>
+  </Sheet>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/sheet/index.ts

@@ -0,0 +1,3 @@
+export { default as SheetDemo } from './SheetDemo.svelte';
+export { default as SheetPositionDemo } from './SheetPositionDemo.svelte';
+export { default as SheetSizeDemo } from './SheetSizeDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/skeleton/SkeletonDemo.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Skeleton } from '$components/ui/skeleton';
+</script>
+
+<div class="flex items-center space-x-4">
+  <Skeleton class="h-12 w-12 rounded-full" />
+  <div class="space-y-2">
+    <Skeleton class="h-4 w-[250px]" />
+    <Skeleton class="h-4 w-[200px]" />
+  </div>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as SkeletonDemo } from './SkeletonDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/slider/SliderDemo.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Slider } from '$components/ui/slider';
+</script>
+
+<Slider value={50} max={100} step={1} class="max-w-[70%]" />

package/templates/sveltekit/src/lib/components/docs/examples/slider/index.ts

@@ -0,0 +1 @@
+export { default as SliderDemo } from './SliderDemo.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/switch/SwitchDemo.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Label } from '$components/ui/label';
+  import { Switch } from '$components/ui/switch';
+</script>
+
+<div class="flex items-center space-x-2">
+  <Switch id="airplane-mode" />
+  <Label for="airplane-mode">Airplane Mode</Label>
+</div>

package/templates/sveltekit/src/lib/components/docs/examples/switch/index.ts

@@ -0,0 +1 @@
+export { default as SwitchDemo } from './SwitchDemo.svelte';