npm - create-tauri-ui - Versions diffs - 0.1.3 → 0.1.5 - Mend

create-tauri-ui 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (416) hide show

package/templates/sveltekit/postcss.config.cjs ADDED Viewed

@@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer
+  ]
+};
+module.exports = config;

package/templates/sveltekit/src/app.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+  namespace svelteHTML {
+    interface HTMLAttributes<T> {
+      'on:copy-done'?: (e: CustomEvent<T>) => void;
+      'on:copy-error'?: (e: CustomEvent<T>) => void;
+    }
+  }
+}
+export {};

package/templates/sveltekit/src/app.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body
+    data-sveltekit-preload-data="hover"
+    class="min-h-screen bg-background font-sans antialiased"
+  >
+    <div style="display: contents" class="flex min-h-screen flex-col">%sveltekit.body%</div>
+  </body>
+</html>

package/templates/sveltekit/src/assets/Inter.var.woff2 ADDED Viewed

Binary file

package/templates/sveltekit/src/content/cli.md ADDED Viewed

@@ -0,0 +1,63 @@
+---
+title: CLI
+description: Use the CLI to add components to your project.
+---
+## init
+Use the `init` command to initialize dependencies for a new project.
+The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.cjs`, and creates CSS variables for the project.
+```bash
+npx shadcn-svelte init
+```
+## add
+Use the `add` command to add components to your project.
+The `add` command adds a component to your project and installs all required dependencies.
+```bash
+npx shadcn-svelte add [component]
+```
+You will be prompted to set an installation path for the component. The default path is `src/lib/components/ui`. The path will be stored in your `svelte.config.js` file and remembered on subsequent component installations.
+```js title="svelte.config.js" {17-19}
+const config = {
+  preprocess: [
+    vitePreprocess(),
+    preprocess({
+      postcss: true
+    }),
+    mdsvex(mdsvexOptions)
+  ],
+  extensions: ['.svelte', '.md'],
+  kit: {
+    adapter: adapter(),
+    alias: {
+      $components: 'src/lib/components',
+      '$components/*': 'src/lib/components/*'
+    }
+  },
+  shadcn: {
+    componentPath: './src/lib/components/ui'
+  }
+};
+```
+To change the installation path, simply update the `componentPath` value in your `svelte.config.js` file.
+### Example
+```bash
+npx shadcn-svelte add alert-dialog
+```
+You can also run the command without any arguments to view a list of all available components:
+```bash
+npx shadcn-svelte add
+```

package/templates/sveltekit/src/content/components/accordion.md ADDED Viewed

@@ -0,0 +1,59 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/accordion
+radix: https://www.radix-svelte.com/docs/accordion
+---
+<script>
+    import { AccordionDemo, ComponentExample, ManualInstall } from '$components/docs';
+</script>
+<ComponentExample src="src/lib/components/docs/examples/accordion/AccordionDemo.svelte">
+<div slot="example" style="max-width: 70%; width: 100%;">
+<AccordionDemo />
+</div>
+</ComponentExample>
+## Installation
+```bash
+npx shadcn-svelte add accordion
+```
+<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 {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger
+  } from '$components/ui/accordion';
+</script>
+```
+```svelte
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```

package/templates/sveltekit/src/content/components/alert-dialog.md ADDED Viewed

@@ -0,0 +1,75 @@
+---
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+featured: true
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/alert-dialog
+radix: https://www.radix-svelte.com/docs/alertdialog
+---
+<script>
+  import { AlertDialogDemo, ComponentExample, ManualInstall } from '$components/docs';
+</script>
+<ComponentExample src="src/lib/components/docs/examples/alert-dialog/AlertDialogDemo.svelte">
+<div slot="example">
+<AlertDialogDemo />
+</div>
+</ComponentExample>
+## Installation
+```bash
+npx shadcn-svelte add alert-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 {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger
+  } from '$components/ui/alert-dialog';
+</script>
+```
+```svelte
+<AlertDialog>
+  <AlertDialogTrigger>Open</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/content/components/alert.md ADDED Viewed

@@ -0,0 +1,67 @@
+---
+title: Alert
+description: Displays a callout for user attention.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/alert
+---
+<script>
+  import { AlertDemo, AlertDemoDestructive, ComponentExample, ManualInstall } from '$components/docs';
+</script>
+<ComponentExample src="src/lib/components/docs/examples/alert/AlertDemo.svelte">
+<div slot="example" style="width: 100%;">
+<AlertDemo />
+</div>
+</ComponentExample>
+## Installation
+```bash
+npx shadcn-svelte add alert
+```
+<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 { Alert, AlertDescription, AlertTitle } from '$components/ui/alert';
+</script>
+```
+```svelte
+<Alert>
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>You can add components to your app using the cli.</AlertDescription>
+</Alert>
+```
+## Examples
+### Default
+<ComponentExample src="src/lib/components/docs/examples/alert/AlertDemo.svelte">
+<div slot="example" style="width: 100%;">
+<AlertDemo />
+</div>
+</ComponentExample>
+### Destructive
+<ComponentExample src="src/lib/components/docs/examples/alert/AlertDemoDestructive.svelte">
+<div slot="example" style="width: 100%;">
+<AlertDemoDestructive />
+</div>
+</ComponentExample>

package/templates/sveltekit/src/content/components/aspect-ratio.md ADDED Viewed

@@ -0,0 +1,51 @@
+---
+title: Aspect Ratio
+description: Displays content within a desired ratio.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/aspect-ratio
+radix: https://www.radix-svelte.com/docs/aspect-ratio
+---
+<script>
+  import { AspectRatioDemo, ComponentExample, ManualInstall } from '$components/docs';
+</script>
+<ComponentExample src="src/lib/components/docs/examples/aspect-ratio/AspectRatioDemo.svelte">
+<div slot="example" style="width: 100%;">
+<AspectRatioDemo />
+</div>
+</ComponentExample>
+## Installation
+```bash
+npx shadcn-svelte add aspect-ratio
+```
+<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 { AspectRatio } from '$components/ui/aspect-ratio';
+</script>
+```
+```svelte
+<AspectRatio ratio={16 / 9} class="bg-muted">
+  <img src="..." alt="..." class="rounded-md object-cover" />
+</AspectRatio>
+```

package/templates/sveltekit/src/content/components/avatar.md ADDED Viewed

@@ -0,0 +1,52 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/avatar
+radix: https://www.radix-svelte.com/docs/avatar
+---
+<script>
+  import { AvatarDemo, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+<ComponentExample src="src/lib/components/docs/examples/avatar/AvatarDemo.svelte">
+<div slot="example">
+<AvatarDemo />
+</div>
+</ComponentExample>
+## Installation
+```bash
+npx shadcn-svelte add avatar
+```
+<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 { Avatar, AvatarFallback, AvatarImage } from '$components/ui/avatar';
+</script>
+```
+```svelte
+<Avatar>
+  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>
+```

package/templates/sveltekit/src/content/components/badge.md ADDED Viewed

@@ -0,0 +1,104 @@
+---
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/badge
+---
+<script>
+  import { BadgeDemo, BadgeDemoDestructive, BadgeDemoOutline, BadgeDemoSecondary, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+<ComponentExample src="src/lib/components/docs/examples/badge/BadgeDemo.svelte">
+<div slot="example">
+<BadgeDemo />
+</div>
+</ComponentExample>
+## Installation
+```bash
+npx shadcn-svelte add badge
+```
+<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 { Badge } from '$components/ui/badge';
+</script>
+```
+```svelte
+<Badge variant="outline">Badge</Badge>
+```
+### Link
+You can use the `badgeVariants` helper to create a link that looks like a badge.
+```svelte
+<script lang="ts">
+  import { badgeVariants } from '$components/ui/badge';
+</script>
+```
+```svelte
+<a href="/dashboard" class={badgeVariants({ variant: 'outline' })}>Badge</a>
+```
+## Examples
+### Default
+<ComponentExample src="src/lib/components/docs/examples/badge/BadgeDemo.svelte">
+<div slot="example">
+<BadgeDemo />
+</div>
+</ComponentExample>
+---
+### Secondary
+<ComponentExample src="src/lib/components/docs/examples/badge/BadgeDemoSecondary.svelte">
+<div slot="example">
+<BadgeDemoSecondary />
+</div>
+</ComponentExample>
+---
+### Outline
+<ComponentExample src="src/lib/components/docs/examples/badge/BadgeDemoOutline.svelte">
+<div slot="example">
+<BadgeDemoOutline />
+</div>
+</ComponentExample>
+---
+### Destructive
+<ComponentExample src="src/lib/components/docs/examples/badge/BadgeDemoDestructive.svelte">
+<div slot="example">
+<BadgeDemoDestructive />
+</div>
+</ComponentExample>

package/templates/sveltekit/src/content/components/button.md ADDED Viewed

@@ -0,0 +1,165 @@
+---
+title: Button
+description: Displays a button or a component that looks like a button.
+featured: true
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/components/ui/button
+---
+<script>
+  import { ButtonDemo, ButtonDemoDestructive, ButtonDemoGhost, ButtonDemoOutline, ButtonDemoSecondary, ButtonDemoIcon, ButtonDemoLoading, ButtonDemoLink, ComponentExample, ManualInstall } from '$lib/components/docs';
+</script>
+<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemo.svelte">
+<div slot="example">
+<ButtonDemo />
+</div>
+</ComponentExample>
+## Installation
+```bash
+npx shadcn-svelte add button
+```
+<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 { Button } from '$components/ui/button';
+</script>
+```
+```svelte
+<Button variant="outline">Button</Button>
+```
+### Link
+You can convert the `<button>` into an `<a>` element by simply passing an `href` as a prop.
+```svelte
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+</script>
+```
+```svelte
+<Button href="/dashboard">Dashboard</Button>
+```
+Alternatively, you can use the `buttonVariants` helper to create a link that looks like a button.
+```svelte
+<script lang="ts">
+  import { buttonVariants } from '$components/ui/button';
+</script>
+```
+```svelte
+<a href="/dashboard" class={buttonVariants({ variant: 'outline' })}> Dashboard </a>
+```
+## Examples
+### Primary
+<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemo.svelte">
+<div slot="example">
+<ButtonDemo />
+</div>
+</ComponentExample>
+---
+### Secondary
+<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoSecondary.svelte">
+<div slot="example">
+<ButtonDemoSecondary />
+</div>
+</ComponentExample>
+---
+### Destructive
+<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoDestructive.svelte">
+<div slot="example">
+<ButtonDemoDestructive />
+</div>
+</ComponentExample>
+---
+### Outline
+<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoOutline.svelte">
+<div slot="example">
+<ButtonDemoOutline />
+</div>
+</ComponentExample>
+---
+### Ghost
+<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoGhost.svelte">
+<div slot="example">
+<ButtonDemoGhost />
+</div>
+</ComponentExample>
+---
+### Link
+<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoLink.svelte">
+<div slot="example">
+<ButtonDemoLink />
+</div>
+</ComponentExample>
+---
+### With Icon
+<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoIcon.svelte">
+<div slot="example">
+<ButtonDemoIcon />
+</div>
+</ComponentExample>
+---
+### Loading
+<ComponentExample src="src/lib/components/docs/examples/button/ButtonDemoLoading.svelte">
+<div slot="example">
+<ButtonDemoLoading />
+</div>
+</ComponentExample>