create-tauri-ui 0.1.3 → 0.1.5

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

@@ -0,0 +1,82 @@
+---
+title: Card
+description: Displays a card with header, content, and footer.
+featured: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/card
+---
+
+<script>
+  import { CardDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/card/CardDemo.svelte">
+
+<div slot="example">
+<CardDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add card
+```
+
+<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 {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle
+  } from '$components/ui/card';
+</script>
+```
+
+```svelte
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>
+```
+
+### Modify the heading level
+
+By default, the `<CardTitle>` component renders an `<h3>` element. You can change this by passing a `tag` prop to the component.
+
+For example:
+
+```svelte
+<CardTitle tag={'h2'}>This will render an H2</CardTitle>
+```
+
+```svelte
+<CardTitle tag={'h5'}>This will render an H5</CardTitle>
+```
+
+```svelte
+<CardTitle tag={'p'}>This will render a P tag</CardTitle>
+```
+
+## Examples
+
+Coming soon

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

@@ -0,0 +1,71 @@
+---
+title: Checkbox
+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/checkbox
+radix: https://www.radix-svelte.com/docs/checkbox
+---
+
+<script>
+  import { CheckboxDemo, CheckboxDemoDisabled, CheckboxDemoText, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/checkbox/CheckboxDemo.svelte">
+
+<div slot="example">
+<CheckboxDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add checkbox
+```
+
+<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 { Checkbox } from '$components/ui/checkbox';
+</script>
+```
+
+```svelte
+<Checkbox />
+```
+
+## Examples
+
+### With Text
+
+<ComponentExample src="src/lib/components/docs/examples/checkbox/CheckboxDemoText.svelte">
+
+<div slot="example">
+<CheckboxDemoText />
+</div>
+
+</ComponentExample>
+
+### Disabled
+
+<ComponentExample src="src/lib/components/docs/examples/checkbox/CheckboxDemoDisabled.svelte">
+
+<div slot="example">
+<CheckboxDemoDisabled />
+</div>
+
+</ComponentExample>

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

@@ -0,0 +1,55 @@
+---
+title: Collapsible
+description: An interactive component which expands/collapses a panel.
+component: true
+featured: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/collapsible
+radix: https://www.radix-svelte.com/docs/collapsible
+---
+
+<script>
+  import { CollapsibleDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/collapsible/CollapsibleDemo.svelte">
+
+<div slot="example">
+<CollapsibleDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add collapsible
+```
+
+<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 { Collapsible, CollapsibleContent, CollapsibleTrigger } from '$components/ui/collapsible';
+</script>
+```
+
+```svelte
+<Collapsible>
+  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
+  <CollapsibleContent>
+    Yes. Free to use for personal and commercial projects. No attribution required.
+  </CollapsibleContent>
+</Collapsible>
+```

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

@@ -0,0 +1,72 @@
+---
+title: Dialog
+description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+component: true
+featured: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/dialog
+radix: https://www.radix-svelte.com/docs/dialog
+---
+
+<script>
+  import { DialogDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/dialog/DialogDemo.svelte">
+
+<div slot="example">
+<DialogDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add dialog
+```
+
+<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 {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger
+  } from '$components/ui/dialog';
+</script>
+```
+
+```svelte
+<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+```
+
+## Notes
+
+(coming soon)

package/templates/sveltekit/src/content/components/hover-card.md

@@ -0,0 +1,52 @@
+---
+title: Hover Card
+description: For sighted users to preview content available behind a link.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/hover-card
+radix: https://www.radix-svelte.com/docs/hovercard
+---
+
+<script>
+  import { HoverCardDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/hover-card/HoverCardDemo.svelte">
+
+<div slot="example">
+<HoverCardDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add hover-card
+```
+
+<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 { HoverCard, HoverCardContent, HoverCardTrigger } from '$components/ui/hover-card';
+</script>
+```
+
+```svelte
+<HoverCard>
+  <HoverCardTrigger>Hover</HoverCardTrigger>
+  <HoverCardContent>SvelteKit - Web development, streamlined</HoverCardContent>
+</HoverCard>
+```

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

@@ -0,0 +1,114 @@
+---
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/input
+---
+
+<script>
+  import { InputDemo, InputDemoDisabled, InputDemoLabel, InputDemoText, InputDemoFile, InputDemoButton, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/input/InputDemo.svelte" >
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<InputDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add input
+```
+
+<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 { Input } from '$components/ui/input';
+</script>
+```
+
+```svelte
+<Input />
+```
+
+## Examples
+
+### Default
+
+<ComponentExample src="src/lib/components/docs/examples/input/InputDemo.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<InputDemo />
+</div>
+
+</ComponentExample>
+
+---
+
+### Disabled
+
+<ComponentExample src="src/lib/components/docs/examples/input/InputDemoDisabled.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<InputDemoDisabled />
+</div>
+
+</ComponentExample>
+
+---
+
+### With Label
+
+<ComponentExample src="src/lib/components/docs/examples/input/InputDemoLabel.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<InputDemoLabel />
+</div>
+
+</ComponentExample>
+
+---
+
+### With Text
+
+<ComponentExample src="src/lib/components/docs/examples/input/InputDemoText.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<InputDemoText />
+</div>
+
+</ComponentExample>
+
+---
+
+### With Button
+
+<ComponentExample src="src/lib/components/docs/examples/input/InputDemoButton.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<InputDemoButton />
+</div>
+
+</ComponentExample>
+
+---
+
+### File
+
+<ComponentExample src="src/lib/components/docs/examples/input/InputDemoFile.svelte">
+
+<div slot="example" style="max-width: 24rem; width: 100%;">
+<InputDemoFile />
+</div>
+
+</ComponentExample>

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

@@ -0,0 +1,49 @@
+---
+title: Label
+description: Renders an accessible label associated with controls.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/label
+radix: https://www.radix-svelte.com/docs/label
+---
+
+<script>
+  import { LabelDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/label/LabelDemo.svelte">
+
+<div slot="example">
+<LabelDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add label
+```
+
+<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';
+</script>
+```
+
+```svelte
+<Label for="email">Your email address</Label>
+```

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

@@ -0,0 +1,49 @@
+---
+title: Progress
+description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/progress
+radix: https://www.radix-svelte.com/docs/progress
+---
+
+<script>
+  import { ProgressDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentExample src="src/lib/components/docs/examples/progress/ProgressDemo.svelte">
+
+<div slot="example" style="width: 60%;">
+<ProgressDemo />
+</div>
+
+</ComponentExample>
+
+## Installation
+
+```bash
+npx shadcn-svelte add progress
+```
+
+<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 { Progress } from '$components/ui/progress';
+</script>
+```
+
+```svelte
+<Progress value={33}>
+```

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

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

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