create-tauri-ui 0.3.1 → 0.3.2

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

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

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

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

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

@@ -1,84 +0,0 @@
----
-title: Introduction
-description: Re-usable components built using Radix Svelte and Tailwind CSS.
----
-
-<script>
-  import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '$components/ui/accordion';
-  import { Callout } from '$components/docs';
-  import { AlertCircle } from "lucide-svelte";
-</script>
-
-An unofficial, community-led [Svelte](https://svelte.dev) port of [shadcn/ui](https://ui.shadcn.com). We are not affiliated with [shadcn](https://twitter.com/shadcn), but we did get his blessing before creating a clone of his work. This is a project born out of the need for a similar project for the Svelte ecosystem.
-
-<br>
-
-<Callout>
-	  <p>
-	<strong>NOTE:</strong> This project does not have complete feature parity with the original. We are working on it, and if you'd like to expedite the process, please consider contributing to <a href="https://radix-svelte.com" rel="noreferrer" target="_blank">Radix Svelte</a>, which this project is built on.
-	</p>
-</Callout>
-
-This is **NOT** a component library. It's a collection of re-usable components that you can copy and paste or use the CLI to add to your apps.
-
-**What do you mean not a component library?**
-
-It means you do not install it as a dependency. It is not available or distributed via npm, with no plans to publish it.
-
-Pick the components you need. Use the CLI to automatically add the components, or copy and paste the code into your project and customize to your needs. The code is yours.
-
-_Use this as a reference to build your own component libraries._
-
-## FAQ
-
-<Accordion type="multiple" collapsible>
-
-<AccordionItem value="faq-1">
-	<AccordionTrigger>
-		Why not packaged as a dependency?
-	</AccordionTrigger>
-	<AccordionContent>
-
-The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.
-
-Start with some sensible defaults, then customize the components to your needs.
-
-One of the drawback of packaging the components in an npm package is that the style is coupled with the implementation. _The design of your components should be separate from their implementation._
-
-</AccordionContent>
-
-</AccordionItem>
-
-<AccordionItem value="faq-2">
-<AccordionTrigger>
-Which frameworks are supported?
-</AccordionTrigger>
-<AccordionContent>
-
-This port is built to be used with Svelte/SvelteKit.
-
-</AccordionContent>
-</AccordionItem>
-
-<AccordionItem value="faq-3">
-	<AccordionTrigger>
-	Can I use this in my project?
-	</AccordionTrigger>
-	<AccordionContent>
-Yes. Free to use for personal and commercial projects. No attribution required.
-
-But let us know if you do use it. We'd love to see what you build with it.
-
-  </AccordionContent>
-
-</AccordionItem>
-
-</Accordion>
-
-## Credits
-
-- [@shadcn](https://twitter.com/shadcn) - The brilliant mind behind the designs, methodology, and implementation.
-- [Radix Svelte](https://radix-svelte.com) - For the primitives. This project would not be possible without the incredible work by Thomas and the Radix Svelte team.
-- [Vercel](https://vercel.com) - Where this project is hosted.
-- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
-- [Cal](https://cal.com) - Where shad copied the styles for the first component: the `Button`.

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

@@ -1,327 +0,0 @@
----
-title: Installation
-description: How to install dependencies and structure your app.
----
-
-<script>
-  import { Alert, AlertDescription } from "$components/ui/alert";
-  import { Steps } from "$components/docs";
-</script>
-
-Unlike the official [shadcn/ui](https://ui.shadcn.com) for React, where the full components can exist in a single file, components in this port are split into multiple files. This is because Svelte doesn't support defining multiple components in a single file, so utilizing the CLI to add components will be the optimal approach.
-
-The CLI will create a folder for each _component_, which will sometimes just contain a single Svelte file, and in other times, multiple files. Within each folder, there will be an `index.ts` file that exports the component(s), so you can import them from a single file.
-
-For example, the Accordion component is split into four `.svelte` files:
-
-- `Accordion.svelte`
-- `AccordionContent.svelte`
-- `AccordionItem.svelte`
-- `AccordionTrigger.svelte`
-
-Each of which can be imported from the `accordion/index.ts` file like so:
-
-```svelte
-<script lang="ts">
-  import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger
-  } from '$components/ui/accordion';
-</script>
-```
-
-## New Project
-
-<Steps>
-
-### Create a new project
-
-Use the SvelteKit CLI to create a new project.
-
-```bash
-npm create svelte@latest my-app
-```
-
-### Add TailwindCSS
-
-Use the `svelte-add` CLI to add Tailwind CSS to your project.
-
-```bash
-npx svelte-add@latest tailwindcss
-```
-
-### Run the CLI
-
-```bash
-npx shadcn-svelte init
-```
-
-This will install dependencies, update your TailwindCSS configuration, add the `$components` path alias to your `svelte.config.js` file, and configure the `cn` utils for you.
-
-</Steps>
-
-## Manual Installation
-
-<Steps>
-
-### Add Tailwind
-
-Use the `svelte-add` CLI to add Tailwind CSS to your project.
-
-```bash
-npx svelte-add@latest tailwindcss
-```
-
-### Add dependencies
-
-Add the following dependencies to your project:
-
-```bash
-npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-svelte
-```
-
-### Path Aliases
-
-Use the `$components` alias to make it easier to import your components. This is how you can configure the `$components` alias in `svelte.config.js`:
-
-```js title="svelte.config.js" {7-8}
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-  // ...
-  kit: {
-    // ..
-    alias: {
-      $components: 'src/lib/components',
-      '$components/*': 'src/lib/components/*'
-    }
-  }
-};
-```
-
-If you prefer to use a different alias than `$components`, you'll need to update the `import` statements when adding components.
-
-### Configure tailwind.config.cjs
-
-This is what this project's `tailwind.config.cjs` file looks like:
-
-```js title="tailwind.config.cjs"
-const { fontFamily } = require('tailwindcss/defaultTheme');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: ['class'],
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px'
-      }
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))'
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))'
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))'
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))'
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))'
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))'
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))'
-        }
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)'
-      },
-      fontFamily: {
-        sans: [...fontFamily.sans]
-      }
-    }
-  },
-  plugins: [require('tailwindcss-animate')]
-};
-```
-
-Feel free to add or modify as needed to suit your project.
-
-### Configure styles
-
-Add the following to your `src/app.postcss` file. You can learn more about using CSS variables for theming in the [theming section](/docs/theming).
-
-```css title="src/app.postcss"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 92% 38%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 359 51% 48%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: 'rlig' 1, 'calt' 1;
-  }
-}
-```
-
-### Add a cn helper
-
-You'll want to create a `cn` helper to make it easier to conditionally add Tailwind CSS classes. This project defines it in `lib/utils.ts`:
-
-```ts title="lib/utils.ts"
-import type { ClassValue } from 'clsx';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-```
-
-### Import styles to your app
-
-Create `src/routes/+layout.svelte` and import the styles:
-
-```svelte title="src/routes/+layout.svelte"
-<script lang="ts">
-  import '../app.postcss';
-</script>
-
-<slot />
-```
-
-</Steps>
-
-## Icons
-
-This project uses icons from [Lucide](https://lucide.dev/), but feel free to use any icon library.
-
-## App structure
-
-Here's a recommended, but not required app structure:
-
-```txt {4-11,15,19}
-src
-├── lib
-│   ├── components
-│   │   ├── ui
-│   │   │   ├── alert-dialog
-│   │   │   │   ├── index.ts
-│   │   │   │   └── Alert.svelte
-│   │   │   ├── button
-│   │   │   │   ├── index.ts
-│   │   │   │   └── Button.svelte
-│   │   │   └── ...
-│   │   ├── Navigation.svelte
-│   │   ├── PageHeader.svelte
-│   │   └── ...
-│   └── utils.ts
-├── routes
-│   ├── +page.svelte
-│   └── +layout.svelte
-├── app.postcss
-```
-
-- Place the UI components in the `lib/components/ui` folder.
-- The rest of the components such as `<PageHeader />` and `<Navigation />` are placed in the `lib/components` folder.
-- The `lib/utils.ts` file is where you can define the `cn` helper.
-- The `app.postcss` file contains the global CSS.
-
-That's it. You can now start adding components to your project.

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

@@ -1,189 +0,0 @@
----
-title: Theming
-description: Use CSS Variables to customize the look and feel of your application.
----
-
-<script>
-  import { Callout, HexToChannels } from '$components/docs';
-</script>
-
-We use CSS variables for styling. This allows you to easily change the colors of components without having to update class names.
-
-**CSS variables must be defined without the color space function**. See the [Tailwind CSS documentation](https://tailwindcss.com/docs/customizing-colors#using-css-variables) for more information.
-
-## Hex -> Color Channel
-
-You can use this tool to convert your HEX color to HSL without the color space function. Simply add your color in hex format, copy one of the generated values, then add them to the CSS variable.
-
-<HexToChannels />
-
-## Convention
-
-We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color.
-
-<Callout>
-
-The `background` suffix can be omitted if the variable is used for the background color of the component.
-
-</Callout>
-
-Given the following CSS variables:
-
-```css
---primary: 222.2 47.4% 11.2%;
---primary-foreground: 210 40% 98%;
-```
-
-The `background` color of the following component will be `hsl(var(--primary))` and the `foreground` color will be `hsl(var(--primary-foreground))`.
-
-```svelte
-<div class="bg-primary text-primary-foreground">Hello</div>
-```
-
-## CSS Variables
-
-Here's the list of variables available for customization:
-
-```css title="Default background color of <body />...etc"
---background: 0 0% 100%;
---foreground: 222.2 47.4% 11.2%;
-```
-
-```css title="Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />"
---muted: 210 40% 96.1%;
---muted-foreground: 215.4 16.3% 46.9%;
-```
-
-```css title="Background color for <Card />"
---card: 0 0% 100%;
---card-foreground: 222.2 47.4% 11.2%;
-```
-
-```css title="Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover />"
---popover: 0 0% 100%;
---popover-foreground: 222.2 47.4% 11.2%;
-```
-
-```css title="Default border color"
---border: 214.3 31.8% 91.4%;
-```
-
-```css title="Border color for inputs such as <Input />, <Select />, <Textarea />"
---input: 214.3 31.8% 91.4%;
-```
-
-```css title="Primary colors for <Button />"
---primary: 222.2 47.4% 11.2%;
---primary-foreground: 210 40% 98%;
-```
-
-```css title="Secondary colors for <Button />"
---secondary: 210 40% 96.1%;
---secondary-foreground: 222.2 47.4% 11.2%;
-```
-
-```css title="Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc"
---accent: 210 40% 96.1%;
---accent-foreground: 222.2 47.4% 11.2%;
-```
-
-```css title="Used for destructive actions such as <Button variant='destructive'>"
---destructive: 0 100% 50%;
---destructive-foreground: 210 40% 98%;
-```
-
-```css title="Used for focus ring"
---ring: 215 20.2% 65.1%;
-```
-
-```css title="Border radius for card, input and buttons"
---radius: 0.5rem;
-```
-
-## Default
-
-The following is the default color palette used by the components.
-
-```css title="src/app.postcss"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 92% 38%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 359 51% 48%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings: 'rlig' 1, 'calt' 1;
-  }
-}
-```