create-tauri-ui 0.1.2 → 0.1.4

package/templates/sveltekit/src/lib/components/docs/charts/Bar.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import { scaleLinear } from 'd3-scale';
+
+  const data = [
+    {
+      name: 'Jan',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Feb',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Mar',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Apr',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'May',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Jun',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Jul',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Aug',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Sep',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Oct',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Nov',
+      total: Math.floor(Math.random() * 5000) + 1000
+    },
+    {
+      name: 'Dec',
+      total: Math.floor(Math.random() * 5000) + 1000
+    }
+  ];
+
+  const xTicks = data.map((d) => d.name);
+  const yTicks = [0, 1500, 3000, 4500, 6000];
+  const padding = { top: 20, right: 15, bottom: 20, left: 45 };
+
+  let width = 500;
+  let height = 200;
+
+  function formatMobile(tick: number | string) {
+    return "'" + tick.toString().slice(-2);
+  }
+
+  $: xScale = scaleLinear()
+    .domain([0, xTicks.length])
+    .range([padding.left, width - padding.right]);
+
+  $: yScale = scaleLinear()
+    .domain([0, Math.max.apply(null, yTicks)])
+    .range([height - padding.bottom, padding.top]);
+
+  $: innerWidth = width - (padding.left + padding.right);
+  $: barWidth = innerWidth / xTicks.length;
+</script>
+
+<div class="chart" bind:clientWidth={width} bind:clientHeight={height}>
+  <svg>
+    <!-- y axis -->
+    <g class="axis y-axis">
+      {#each yTicks as tick}
+        <g class="text-xs" transform="translate(0, {yScale(tick)})">
+          <text
+            stroke="none"
+            font-size="12"
+            orientation="left"
+            width="60"
+            height="310"
+            x="57"
+            y="-4"
+            fill="#888888"
+            text-anchor="end"><tspan x="36" dy="0.355em">${tick}</tspan></text
+          >
+        </g>
+      {/each}
+    </g>
+
+    <!-- x axis -->
+    <g class="axis x-axis">
+      {#each data as point, i}
+        <g class="text-xs" transform="translate({xScale(i)},{height})">
+          <text
+            stroke="none"
+            font-size="12"
+            orientation="bottom"
+            width="531"
+            height="30"
+            x={barWidth / 2}
+            y="-15"
+            fill="#888888"
+            text-anchor="middle"
+            ><tspan x={barWidth / 2} dy="0.71em"
+              >{width > 380 ? point.name : formatMobile(point.name)}</tspan
+            ></text
+          >
+        </g>
+      {/each}
+    </g>
+
+    <g>
+      {#each data as point, i}
+        <rect
+          x={xScale(i) + 2}
+          y={yScale(point.total)}
+          width={barWidth - 8}
+          height={yScale(0) - yScale(point.total)}
+          fill="#adfa1d"
+          rx="4"
+          ry="4"
+        />
+      {/each}
+    </g>
+  </svg>
+</div>
+
+<style>
+  .chart {
+    width: 100%;
+    margin: 0 auto;
+  }
+
+  svg {
+    position: relative;
+    width: 100%;
+    height: 350px;
+  }
+
+  rect {
+    max-width: 51px;
+  }
+</style>

package/templates/sveltekit/src/lib/components/docs/dashboard/DashboardPage.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { Activity, CreditCard, DollarSign, Download, Users } from 'lucide-svelte';
+  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 { Tabs, TabsContent, TabsList, TabsTrigger } from '$components/ui/tabs';
+  import MainNav from './MainNav.svelte';
+  import Overview from './Overview.svelte';
+  import RecentSales from './RecentSales.svelte';
+  import Search from './Search.svelte';
+</script>
+
+<div class="md:hidden">
+  <img
+    src="/examples/dashboard-light.png"
+    width={1280}
+    height={866}
+    alt="Dashboard"
+    class="block dark:hidden"
+  />
+  <img
+    src="/examples/dashboard-dark.png"
+    width={1280}
+    height={866}
+    alt="Dashboard"
+    class="hidden dark:block"
+  />
+</div>
+<div class="hidden flex-col md:flex">
+  <div class="border-b">
+    <div class="flex h-16 items-center px-4">
+      <MainNav class="mx-6" />
+      <div class="ml-auto flex items-center space-x-4">
+        <Search />
+        <Avatar className="h-8 w-8">
+          <AvatarImage src="/avatars/01.png" alt="@shadcn" />
+          <AvatarFallback>SC</AvatarFallback>
+        </Avatar>
+      </div>
+    </div>
+  </div>
+  <div class="flex-1 space-y-4 p-8 pt-6">
+    <div class="flex items-center justify-between space-y-2">
+      <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+      <div class="flex items-center space-x-2">
+        <Button size="sm">
+          <Download class="mr-2 h-4 w-4" />
+          Download
+        </Button>
+      </div>
+    </div>
+    <Tabs value="overview" class="space-y-4">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics" disabled>Analytics</TabsTrigger>
+        <TabsTrigger value="reports" disabled>Reports</TabsTrigger>
+        <TabsTrigger value="notifications" disabled>Notifications</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview" class="space-y-4">
+        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Total Revenue</CardTitle>
+              <DollarSign class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">$45,231.89</div>
+              <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Subscriptions</CardTitle>
+              <Users class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">+2350</div>
+              <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Sales</CardTitle>
+              <CreditCard class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">+12,234</div>
+              <p class="text-xs text-muted-foreground">+19% from last month</p>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle class="text-sm font-medium">Active Now</CardTitle>
+              <Activity class="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+              <div class="text-2xl font-bold">+573</div>
+              <p class="text-xs text-muted-foreground">+201 since last hour</p>
+            </CardContent>
+          </Card>
+        </div>
+        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+          <Card class="col-span-4">
+            <CardHeader>
+              <CardTitle>Overview</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <Overview />
+            </CardContent>
+          </Card>
+          <Card class="col-span-3">
+            <CardHeader>
+              <CardTitle>Recent Sales</CardTitle>
+              <CardDescription>You made 265 sales this month.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <RecentSales />
+            </CardContent>
+          </Card>
+        </div>
+      </TabsContent>
+    </Tabs>
+  </div>
+</div>

package/templates/sveltekit/src/lib/components/docs/dashboard/MainNav.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<nav class={cn('flex items-center space-x-4 lg:space-x-6', className)}>
+  <a href="/examples/dashboard" class="text-sm font-medium transition-colors hover:text-primary">
+    Overview
+  </a>
+
+  <a
+    href="/examples/dashboard"
+    class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+  >
+    Customers
+  </a>
+  <a
+    href="/examples/dashboard"
+    class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+  >
+    Products
+  </a>
+  <a
+    href="/examples/dashboard"
+    class="text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
+  >
+    Settings
+  </a>
+</nav>

package/templates/sveltekit/src/lib/components/docs/dashboard/Overview.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Bar from '$components/docs/charts/Bar.svelte';
+</script>
+
+<Bar />

package/templates/sveltekit/src/lib/components/docs/dashboard/RecentSales.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { Avatar, AvatarFallback, AvatarImage } from '$components/ui/avatar';
+</script>
+
+<div class="space-y-8">
+  <div class="flex items-center">
+    <Avatar class="h-9 w-9">
+      <AvatarImage src="/avatars/01.png" alt="Avatar" />
+      <AvatarFallback>OM</AvatarFallback>
+    </Avatar>
+    <div class="ml-4 space-y-1">
+      <p class="text-sm font-medium leading-none">Olivia Martin</p>
+      <p class="text-sm text-muted-foreground">olivia.martin@email.com</p>
+    </div>
+    <div class="ml-auto font-medium">+$1,999.00</div>
+  </div>
+  <div class="flex items-center">
+    <Avatar class="flex h-9 w-9 items-center justify-center space-y-0 border">
+      <AvatarImage src="/avatars/02.png" alt="Avatar" />
+      <AvatarFallback>JL</AvatarFallback>
+    </Avatar>
+    <div class="ml-4 space-y-1">
+      <p class="text-sm font-medium leading-none">Jackson Lee</p>
+      <p class="text-sm text-muted-foreground">jackson.lee@email.com</p>
+    </div>
+    <div class="ml-auto font-medium">+$39.00</div>
+  </div>
+  <div class="flex items-center">
+    <Avatar class="h-9 w-9">
+      <AvatarImage src="/avatars/03.png" alt="Avatar" />
+      <AvatarFallback>IN</AvatarFallback>
+    </Avatar>
+    <div class="ml-4 space-y-1">
+      <p class="text-sm font-medium leading-none">Isabella Nguyen</p>
+      <p class="text-sm text-muted-foreground">isabella.nguyen@email.com</p>
+    </div>
+    <div class="ml-auto font-medium">+$299.00</div>
+  </div>
+  <div class="flex items-center">
+    <Avatar class="h-9 w-9">
+      <AvatarImage src="/avatars/04.png" alt="Avatar" />
+      <AvatarFallback>WK</AvatarFallback>
+    </Avatar>
+    <div class="ml-4 space-y-1">
+      <p class="text-sm font-medium leading-none">William Kim</p>
+      <p class="text-sm text-muted-foreground">will@email.com</p>
+    </div>
+    <div class="ml-auto font-medium">+$99.00</div>
+  </div>
+  <div class="flex items-center">
+    <Avatar class="h-9 w-9">
+      <AvatarImage src="/avatars/05.png" alt="Avatar" />
+      <AvatarFallback>SD</AvatarFallback>
+    </Avatar>
+    <div class="ml-4 space-y-1">
+      <p class="text-sm font-medium leading-none">Sofia Davis</p>
+      <p class="text-sm text-muted-foreground">sofia.davis@email.com</p>
+    </div>
+    <div class="ml-auto font-medium">+$39.00</div>
+  </div>
+</div>

package/templates/sveltekit/src/lib/components/docs/dashboard/Search.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Input } from '$components/ui/input';
+</script>
+
+<div>
+  <Input type="search" placeholder="Search..." class="h-9 md:w-[100px] lg:w-[300px]" />
+</div>

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

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

package/templates/sveltekit/src/lib/components/docs/examples/accordion/AccordionDemo.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger
+  } from '$components/ui/accordion';
+</script>
+
+<Accordion type="single" collapsible class="w-full">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Is it styled?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It comes with default styles that matches the other components' aesthetic.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-3">
+    <AccordionTrigger>Is it animated?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It's animated by default, but you can disable it if you prefer.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>

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

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

package/templates/sveltekit/src/lib/components/docs/examples/alert/AlertDemo.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Terminal } from 'lucide-svelte';
+  import { Alert, AlertDescription, AlertTitle } from '$components/ui/alert';
+</script>
+
+<Alert>
+  <Terminal class="h-4 w-4" />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>You can add components to your app using the cli.</AlertDescription>
+</Alert>

package/templates/sveltekit/src/lib/components/docs/examples/alert/AlertDemoDestructive.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { AlertCircle } from 'lucide-svelte';
+  import { Alert, AlertDescription, AlertTitle } from '$components/ui/alert';
+</script>
+
+<Alert variant="destructive">
+  <AlertCircle class="h-4 w-4" />
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>Your session has expired. Please login again.</AlertDescription>
+</Alert>

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

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

package/templates/sveltekit/src/lib/components/docs/examples/alert-dialog/AlertDialogDemo.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger
+  } from '$components/ui/alert-dialog';
+  import { Button } from '$components/ui/button';
+</script>
+
+<AlertDialog>
+  <AlertDialogTrigger>
+    <Button variant="outline">Show Dialog</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Continue</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>

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

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

package/templates/sveltekit/src/lib/components/docs/examples/aspect-ratio/AspectRatioDemo.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { AspectRatio } from '$components/ui/aspect-ratio';
+</script>
+
+<AspectRatio ratio={16 / 9} class="bg-muted">
+  <img
+    src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+    alt="Gray by Drew Beamer"
+    class="h-full w-full rounded-md object-cover"
+  />
+</AspectRatio>

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

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

package/templates/sveltekit/src/lib/components/docs/examples/avatar/AvatarDemo.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Avatar, AvatarFallback, AvatarImage } from '$components/ui/avatar';
+</script>
+
+<Avatar>
+  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>

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

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

package/templates/sveltekit/src/lib/components/docs/examples/badge/BadgeDemo.svelte

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

package/templates/sveltekit/src/lib/components/docs/examples/badge/BadgeDemoDestructive.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Badge } from '$components/ui/badge';
+</script>
+
+<Badge variant="destructive">Destructive</Badge>

package/templates/sveltekit/src/lib/components/docs/examples/badge/BadgeDemoOutline.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Badge } from '$components/ui/badge';
+</script>
+
+<Badge variant="outline">Outline</Badge>

package/templates/sveltekit/src/lib/components/docs/examples/badge/BadgeDemoSecondary.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Badge } from '$components/ui/badge';
+</script>
+
+<Badge variant="secondary">Secondary</Badge>

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

@@ -0,0 +1,4 @@
+export { default as BadgeDemo } from './BadgeDemo.svelte';
+export { default as BadgeDemoDestructive } from './BadgeDemoDestructive.svelte';
+export { default as BadgeDemoOutline } from './BadgeDemoOutline.svelte';
+export { default as BadgeDemoSecondary } from './BadgeDemoSecondary.svelte';

package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemo.svelte

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

package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoDestructive.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+</script>
+
+<Button variant="destructive">Destructive</Button>

package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoGhost.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+</script>
+
+<Button variant="ghost">Ghost</Button>

package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoIcon.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Mail } from 'lucide-svelte';
+  import { Button } from '$components/ui/button';
+</script>
+
+<Button>
+  <Mail class="mr-2 h-4 w-4" />
+  Login with Email
+</Button>

package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoLink.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+</script>
+
+<Button variant="link">Link</Button>

package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoLoading.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Loader2 } from 'lucide-svelte';
+  import { Button } from '$components/ui/button';
+</script>
+
+<Button disabled>
+  <Loader2 class="mr-2 h-4 w-4 animate-spin" />
+  Please wait
+</Button>

package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoOutline.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+</script>
+
+<Button variant="outline">Outline</Button>

package/templates/sveltekit/src/lib/components/docs/examples/button/ButtonDemoSecondary.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+</script>
+
+<Button variant="secondary">Secondary</Button>

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

@@ -0,0 +1,8 @@
+export { default as ButtonDemo } from './ButtonDemo.svelte';
+export { default as ButtonDemoDestructive } from './ButtonDemoDestructive.svelte';
+export { default as ButtonDemoGhost } from './ButtonDemoGhost.svelte';
+export { default as ButtonDemoIcon } from './ButtonDemoIcon.svelte';
+export { default as ButtonDemoLink } from './ButtonDemoLink.svelte';
+export { default as ButtonDemoLoading } from './ButtonDemoLoading.svelte';
+export { default as ButtonDemoOutline } from './ButtonDemoOutline.svelte';
+export { default as ButtonDemoSecondary } from './ButtonDemoSecondary.svelte';