create-tauri-ui 0.1.2 → 0.1.4

package/templates/sveltekit/src/content/components/sheet.md

@@ -0,0 +1,95 @@
+---
+title: Sheet
+description: Extends the Dialog component to display content that complements the main content of the screen.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/sheet
+radix: https://www.radix-svelte.com/docs/dialog
+---
+
+<script>
+  import { SheetDemo, SheetPositionDemo, SheetSizeDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/sheet/SheetDemo.svelte">
+
+<div slot="example">
+<SheetDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add sheet
+```
+
+<ManualInstall>
+
+1. Install `radix-svelte`:
+
+```bash
+npm install radix-svelte
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger
+  } from '@/components/ui/sheet';
+</script>
+```
+
+```svelte
+<Sheet>
+  <SheetTrigger>Open</SheetTrigger>
+  <SheetContent>
+    <SheetHeader>
+      <SheetTitle>Are you sure absolutely sure?</SheetTitle>
+      <SheetDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </SheetDescription>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>
+```
+
+## Examples
+
+### Position
+
+Pass the `position` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`.
+
+<ComponentExample src="src/lib/components/docs/examples/sheet/SheetPositionDemo.svelte">
+
+<div slot="example">
+<SheetPositionDemo />
+</div>
+
+</ComponentExample>
+
+---
+
+### Size
+
+Pass the `size` property to `<SheetContent />` if you need to adjust the size of the sheet. The values can be `sm`, `default`, `lg`, `xl`, `full` or `content`.
+
+<ComponentExample src="src/lib/components/docs/examples/sheet/SheetSizeDemo.svelte">
+
+<div slot="example">
+<SheetSizeDemo />
+</div>
+
+</ComponentExample>

package/templates/sveltekit/src/content/components/skeleton.md

@@ -0,0 +1,42 @@
+---
+title: Skeleton
+description: Use to show a placeholder while content is loading.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/skeleton
+---
+
+<script>
+  import { SkeletonDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/skeleton/SkeletonDemo.svelte">
+
+<div slot="example">
+<SkeletonDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add skeleton
+```
+
+<ManualInstall>
+
+1. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Skeleton } from '$components/ui/skeleton';
+</script>
+```
+
+```svelte
+<Skeleton class="h-[20px] w-[100px] rounded-full" />
+```

package/templates/sveltekit/src/content/components/slider.md

@@ -0,0 +1,49 @@
+---
+title: Slider
+description: An input where the user selects a value from within a given range.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/slider
+radix: https://www.radix-svelte.com/docs/slider
+---
+
+<script>
+  import { SliderDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/slider/SliderDemo.svelte">
+
+<div slot="example" style="width: 100%; display: flex; justify-content: center;">
+<SliderDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add slider
+```
+
+<ManualInstall>
+
+1. Install `radix-svelte`:
+
+```bash
+npm install radix-svelte
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Slider } from '$components/ui/slider';
+</script>
+```
+
+```svelte
+<Slider value={33} max={100} step={1} />
+```

package/templates/sveltekit/src/content/components/switch.md

@@ -0,0 +1,49 @@
+---
+title: Switch
+description: A control that allows the user to toggle between checked and not checked.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/switch
+radix: https://www.radix-svelte.com/docs/switch
+---
+
+<script>
+  import { SwitchDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/switch/SwitchDemo.svelte">
+
+<div slot="example">
+<SwitchDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add switch
+```
+
+<ManualInstall>
+
+1. Install `radix-svelte`:
+
+```bash
+npm install radix-svelte
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Switch } from '$components/ui/switch';
+</script>
+```
+
+```svelte
+<Switch />
+```

package/templates/sveltekit/src/content/components/table.md

@@ -0,0 +1,78 @@
+---
+title: Table
+description: A responsive table component.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/table
+---
+
+<script>
+  import { TableDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/table/TableDemo.svelte">
+
+<div slot="example" style="width: 100%;">
+<TableDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add table
+```
+
+<ManualInstall>
+
+1. Install `radix-svelte`:
+
+```bash
+npm install radix-svelte
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import {
+    Table,
+    TableBody,
+    TableCaption,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+  } from '$components/ui/table';
+</script>
+```
+
+```svelte
+<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead class="w-[100px]">Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead class="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell class="font-medium">INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>Credit Card</TableCell>
+      <TableCell class="text-right">$250.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## Data Table
+
+(coming soon)

package/templates/sveltekit/src/content/components/tabs.md

@@ -0,0 +1,56 @@
+---
+title: Tabs
+description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/tabs
+radix: https://www.radix-svelte.com/docs/tabs
+---
+
+<script>
+  import { TabsDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/tabs/TabsDemo.svelte">
+
+<div slot="example">
+<TabsDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add tabs
+```
+
+<ManualInstall>
+
+1. Install `radix-svelte`:
+
+```bash
+npm install radix-svelte
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Tabs, TabsContent, TabsList, TabsTrigger } from '$components/ui/tabs';
+</script>
+```
+
+```svelte
+<Tabs value="account" class="w-[400px]">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Make changes to your account here.</TabsContent>
+  <TabsContent value="password">Change your password here.</TabsContent>
+</Tabs>
+```

package/templates/sveltekit/src/content/components/textarea.md

@@ -0,0 +1,102 @@
+---
+title: Textarea
+description: Displays a form textarea or a component that looks like a textarea.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/textarea
+---
+
+<script>
+  import { TextareaDemo, TextareaDemoDisabled, TextareaDemoLabel, TextareaDemoText , TextareaDemoButton, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/textarea/TextareaDemo.svelte" >
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<TextareaDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add textarea
+```
+
+<ManualInstall>
+
+1. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Textarea } from '$components/ui/textarea';
+</script>
+```
+
+```svelte
+<Textarea />
+```
+
+## Examples
+
+### Default
+
+<ComponentExample src="src/lib/components/docs/examples/textarea/TextareaDemo.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<TextareaDemo />
+</div>
+
+</ComponentExample>
+
+---
+
+### Disabled
+
+<ComponentExample src="src/lib/components/docs/examples/textarea/TextareaDemoDisabled.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<TextareaDemoDisabled />
+</div>
+
+</ComponentExample>
+
+---
+
+### With Label
+
+<ComponentExample src="src/lib/components/docs/examples/textarea/TextareaDemoLabel.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<TextareaDemoLabel />
+</div>
+
+</ComponentExample>
+
+---
+
+### With Text
+
+<ComponentExample src="src/lib/components/docs/examples/textarea/TextareaDemoText.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<TextareaDemoText />
+</div>
+
+</ComponentExample>
+
+---
+
+### With Button
+
+<ComponentExample src="src/lib/components/docs/examples/textarea/TextareaDemoButton.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<TextareaDemoButton />
+</div>
+
+</ComponentExample>

package/templates/sveltekit/src/content/components/toggle.md

@@ -0,0 +1,121 @@
+---
+title: Toggle
+description: A two-state button that can be either on or off.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/toggle
+radix: https://www.radix-svelte.com/docs/toggle
+---
+
+<script>
+  import { ToggleDemo, ToggleDemoDisabled, ToggleDemoLg, ToggleDemoSm, ToggleDemoText, ToggleDemoOutline, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/toggle/ToggleDemo.svelte">
+
+<div slot="example">
+<ToggleDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add toggle
+```
+
+<ManualInstall>
+
+1. Install `radix-svelte`:
+
+```bash
+npm install radix-svelte
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Toggle } from '$components/ui/toggle';
+</script>
+```
+
+```svelte
+<Toggle>Toggle</Toggle>
+```
+
+## Examples
+
+### Default
+
+<ComponentExample src="src/lib/components/docs/examples/toggle/ToggleDemo.svelte">
+
+<div slot="example">
+<ToggleDemo />
+</div>
+
+</ComponentExample>
+
+---
+
+### Outline
+
+<ComponentExample src="src/lib/components/docs/examples/toggle/ToggleDemoOutline.svelte">
+
+<div slot="example">
+<ToggleDemoOutline />
+</div>
+
+</ComponentExample>
+
+---
+
+### With Text
+
+<ComponentExample src="src/lib/components/docs/examples/toggle/ToggleDemoText.svelte">
+
+<div slot="example">
+<ToggleDemoText />
+</div>
+
+</ComponentExample>
+
+---
+
+### Small
+
+<ComponentExample src="src/lib/components/docs/examples/toggle/ToggleDemoSm.svelte">
+
+<div slot="example">
+<ToggleDemoSm />
+</div>
+
+</ComponentExample>
+
+---
+
+### Large
+
+<ComponentExample src="src/lib/components/docs/examples/toggle/ToggleDemoLg.svelte">
+
+<div slot="example">
+<ToggleDemoLg />
+</div>
+
+</ComponentExample>
+
+---
+
+### Disabled
+
+<ComponentExample src="src/lib/components/docs/examples/toggle/ToggleDemoDisabled.svelte">
+
+<div slot="example">
+<ToggleDemoDisabled />
+</div>
+
+</ComponentExample>

package/templates/sveltekit/src/content/components/tooltip.md

@@ -0,0 +1,56 @@
+---
+title: Tooltip
+description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/tooltip
+radix: https://www.radix-svelte.com/docs/tooltip
+---
+
+<script>
+  import { TooltipDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/tooltip/TooltipDemo.svelte">
+
+<div slot="example">
+<TooltipDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add tooltip
+```
+
+<ManualInstall>
+
+1. Install `radix-svelte`:
+
+```bash
+npm install radix-svelte
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '$components/ui/tooltip';
+</script>
+```
+
+```svelte
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger>Hover</TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```

package/templates/sveltekit/src/content/figma.md

@@ -0,0 +1,22 @@
+---
+title: Figma
+description: Every component recreated in Figma. With customizable props, typography and icons.
+---
+
+<script>
+  import { AspectRatio } from '$components/ui/aspect-ratio';
+</script>
+
+The Figma UI Kit is open sourced by [Pietro Schirano](https://twitter.com/skirano).
+
+<AspectRatio ratio={16 / 9} class="w-full mt-4">
+
+  <iframe
+    src="https://embed.figma.com/file/1203061493325953101/hf_embed?community_viewer=true&embed_host=shadcn&hub_file_id=1203061493325953101&kind=&viewer=1"
+    class="h-full w-full overflow-hidden rounded-lg border bg-muted"
+  />
+</AspectRatio>
+
+## Grab a copy
+
+https://www.figma.com/community/file/1203061493325953101

package/templates/sveltekit/src/content/forms/superforms.md

@@ -0,0 +1,4 @@
+---
+title: Superforms
+description: Building forms with Superforms and Zod.
+---