create-tauri-ui 0.3.1 → 0.3.3

package/templates/sveltekit/src/content/components/radio-group.md

@@ -1,59 +0,0 @@
----
-title: Radio Group
-description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
-component: true
-source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/radio-group
-radix: https://www.radix-svelte.com/docs/radiogroup
----
-
-<script>
-  import { RadioGroupDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
-</script>
-
-<ComponentExample src="src/lib/components/docs/examples/radio-group/RadioGroupDemo.svelte">
-
-<div slot="example">
-<RadioGroupDemo />
-</div>
-
-</ComponentExample>
-
-## Installation
-
-```bash
-npx shadcn-svelte add radio-group
-```
-
-<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 { Label } from '$components/ui/label';
-  import { RadioGroup, RadioGroupItem } from '$components/ui/radio-group';
-</script>
-```
-
-```svelte
-<RadioGroup value="option-one">
-  <div class="flex items-center space-x-2">
-    <RadioGroupItem value="option-one" id="option-one" />
-    <Label for="option-one">Option One</Label>
-  </div>
-  <div class="flex items-center space-x-2">
-    <RadioGroupItem value="option-two" id="option-two" />
-    <Label for="option-two">Option Two</Label>
-  </div>
-</RadioGroup>
-```

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

@@ -1,49 +0,0 @@
----
-title: Separator
-description: Visually or semantically separates content.
-component: true
-source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/separator
-radix: https://www.radix-svelte.com/docs/separator
----
-
-<script>
-  import { SeparatorDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
-</script>
-
-<ComponentExample src="src/lib/components/docs/examples/separator/SeparatorDemo.svelte">
-
-<div slot="example">
-<SeparatorDemo />
-</div>
-
-</ComponentExample>
-
-## Installation
-
-```bash
-npx shadcn-svelte add separator
-```
-
-<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 { Separator } from '$components/ui/separator';
-</script>
-```
-
-```svelte
-<Separator />
-```

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

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

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

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

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

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

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

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

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