create-tauri-ui 0.3.1 → 0.3.2

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

@@ -1,150 +0,0 @@
----
-title: Typography
-description: Styles for headings, paragraphs, lists...etc
-component: true
----
-
-<script>
-  import { BlockquoteDemo, H1Demo, H2Demo, H3Demo, H4Demo, InlineCodeDemo, LargeDemo, LeadDemo, ListDemo, MutedDemo, PDemo, SmallDemo, TableDemo2, TypographyDemo, ComponentExample } from "$components/docs"
-</script>
-
-<ComponentExample
-src="src/lib/components/docs/examples/typography/TypographyDemo.svelte">
-
-<div slot="example" class="[&>div.min-h-[350px]]:p-6">
-<TypographyDemo />
-</div>
-
-</ComponentExample>
-
-## h1
-
-<ComponentExample src="src/lib/components/docs/examples/typography/H1Demo.svelte" >
-
-<div slot="example">
-  <H1Demo />
-</div>
-
-</ComponentExample>
-
-## h2
-
-<ComponentExample src="src/lib/components/docs/examples/typography/H2Demo.svelte">
-
-<div slot="example">
-  <H2Demo />
-</div>
-
-</ComponentExample>
-
-## h3
-
-<ComponentExample src="src/lib/components/docs/examples/typography/H3Demo.svelte" >
-
-<div slot="example">
-  <H3Demo />
-</div>
-
-</ComponentExample>
-
-## h4
-
-<ComponentExample src="src/lib/components/docs/examples/typography/H4Demo.svelte" >
-
-<div slot="example">
-  <H4Demo />
-</div>
-
-</ComponentExample>
-
-## p
-
-<ComponentExample src="src/lib/components/docs/examples/typography/PDemo.svelte">
-
-<div slot="example">
-  <PDemo />
-</div>
-
-</ComponentExample>
-
-## blockquote
-
-<ComponentExample src="src/lib/components/docs/examples/typography/BlockquoteDemo.svelte">
-
-<div slot="example">
-<BlockquoteDemo />
-</div>
-
-</ComponentExample>
-
-## table
-
-<ComponentExample src="src/lib/components/docs/examples/typography/TableDemo.svelte">
-
-<div slot="example">
-  <TableDemo2 />
-</div>
-
-</ComponentExample>
-
-## list
-
-<ComponentExample src="src/lib/components/docs/examples/typography/ListDemo.svelte">
-
-<div slot="example">
-  <ListDemo />
-</div>
-
-</ComponentExample>
-
-## Inline code
-
-<ComponentExample
-src="src/lib/components/docs/examples/typography/InlineCodeDemo.svelte">
-
-<div slot="example">
-  <InlineCodeDemo />
-</div>
-
-</ComponentExample>
-
-## Lead
-
-<ComponentExample src="src/lib/components/docs/examples/typography/LeadDemo.svelte">
-
-<div slot="example">
-  <LeadDemo />
-</div>
-
-</ComponentExample>
-
-## Large
-
-<ComponentExample src="src/lib/components/docs/examples/typography/LargeDemo.svelte">
-
-<div slot="example">
-  <LargeDemo />
-</div>
-
-</ComponentExample>
-
-## Small
-
-<ComponentExample
-src="src/lib/components/docs/examples/typography/SmallDemo.svelte">
-
-<div slot="example">
-  <SmallDemo />
-</div>
-
-</ComponentExample>
-
-## Muted
-
-<ComponentExample src="src/lib/components/docs/examples/typography/MutedDemo.svelte">
-
-<div slot="example">
-  <MutedDemo />
-</div>
-
-</ComponentExample>

package/templates/sveltekit/src/lib/components/docs/Callout.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { Alert, AlertDescription, AlertTitle } from '$components/ui/alert';
-</script>
-
-<Alert {...$$restProps} class="mt-2">
-  {#if $$slots.icon}
-    <span class="mr-4 text-2xl">
-      <slot name="icon" />
-    </span>
-  {/if}
-  <AlertTitle>
-    <slot name="title" />
-  </AlertTitle>
-  <AlertDescription>
-    <slot />
-  </AlertDescription>
-</Alert>

package/templates/sveltekit/src/lib/components/docs/CodeBlockWrapper.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { buttonVariants } from '$components/ui/button';
-  import { Collapsible, CollapsibleTrigger } from '$components/ui/collapsible';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-  export let expandButtonTitle = 'View Code';
-  let open = false;
-</script>
-
-<Collapsible bind:open>
-  <div class={cn('relative mb-4 overflow-hidden rounded-md', className)} {...$$restProps}>
-    <div class={cn('h-full overflow-hidden', !open && 'max-h-32')}>
-      <slot />
-    </div>
-    <div
-      class={cn(
-        'absolute flex items-center justify-center bg-gradient-to-b from-background/30 to-muted/90 p-2',
-        open ? 'inset-x-0 bottom-0 h-12' : 'inset-0'
-      )}
-    >
-      <span class={!open ? 'pt-4' : ''}>
-        <CollapsibleTrigger class={cn(buttonVariants({ variant: 'secondary' }), 'h-8 text-xs')}>
-          {open ? 'Collapse' : expandButtonTitle}
-        </CollapsibleTrigger>
-      </span>
-    </div>
-  </div>
-</Collapsible>

package/templates/sveltekit/src/lib/components/docs/ComponentExample.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import { CopyButton } from '$components/docs';
-  import { Tabs, TabsContent, TabsList, TabsTrigger } from '$components/ui/tabs';
-  import { cn } from '$lib/utils';
-
-  let codeString: string;
-
-  function copyCodeToClipboard(node: HTMLElement) {
-    codeString = node.innerText ?? '';
-  }
-  let className: string | undefined | null = undefined;
-  export { className as class };
-  export let align: 'start' | 'center' | 'end' = 'center';
-</script>
-
-<div class={cn('group relative my-4 flex flex-col space-y-2', className)} {...$$restProps}>
-  <Tabs value="preview" class="relative mr-auto w-full">
-    <div class="flex items-center justify-between pb-3">
-      <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
-        <TabsTrigger
-          value="preview"
-          class="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-        >
-          Preview
-        </TabsTrigger>
-        <TabsTrigger
-          value="code"
-          class="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-        >
-          Code
-        </TabsTrigger>
-      </TabsList>
-    </div>
-    <TabsContent value="preview" class="rounded-md border">
-      <div
-        class={cn('flex min-h-[350px] justify-center p-10', {
-          'items-center': align === 'center',
-          'items-start': align === 'start',
-          'items-end': align === 'end'
-        })}
-      >
-        <slot name="example" />
-      </div>
-    </TabsContent>
-    <TabsContent value="code">
-      <CopyButton value={codeString} class="absolute right-4 top-20" />
-      <div
-        class="w-full rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto"
-        use:copyCodeToClipboard
-      >
-        <slot />
-      </div>
-    </TabsContent>
-  </Tabs>
-</div>

package/templates/sveltekit/src/lib/components/docs/ComponentSource.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { CodeBlockWrapper } from '$components/docs';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<CodeBlockWrapper
-  expandButtonTitle="Expand"
-  class={cn('my-6 overflow-hidden rounded-md', className)}
->
-  <slot />
-</CodeBlockWrapper>

package/templates/sveltekit/src/lib/components/docs/CopyButton.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import { clickToCopyAction } from 'svelte-legos';
-  import { cn } from '$lib/utils';
-  import { Icons } from './icons';
-
-  let copied = false;
-  let className: string | undefined | null = undefined;
-  export let value = '';
-  export { className as class };
-
-  function handleCopyDone() {
-    copied = true;
-    setTimeout(() => {
-      copied = false;
-    }, 1000);
-  }
-
-  function handleCopyError() {
-    console.log('Error copying');
-  }
-</script>
-
-<button
-  class={cn(
-    'relative z-20 inline-flex h-6 w-6 items-center justify-center rounded-md border bg-background text-sm font-medium transition-all hover:bg-muted focus:outline-none',
-    className
-  )}
-  use:clickToCopyAction={value}
-  on:copy-done={handleCopyDone}
-  on:copy-error={handleCopyError}
-  {...$$restProps}
->
-  <span class="sr-only">Copy</span>
-  {#if copied}
-    <Icons.check class="h-3 w-3" />
-  {:else}
-    <Icons.copy class="h-3 w-3" />
-  {/if}
-</button>

package/templates/sveltekit/src/lib/components/docs/DocsPager.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import type { NavItem, NavItemWithChildren } from '$lib/types/nav';
-  import { page } from '$app/stores';
-  import { Button } from '$components/ui/button';
-  import { docsConfig } from '$lib/config/docs';
-  import { Icons } from './icons';
-
-  let pager: ReturnType<typeof getPagerForDoc>;
-
-  function getPagerForDoc(slug: string) {
-    const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null];
-    let activeIndex: number;
-    if (!slug) {
-      activeIndex = 1;
-    } else {
-      activeIndex = flattenedLinks.findIndex((link) => `/docs/${slug}` === link?.href);
-    }
-
-    const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null;
-    const next = activeIndex !== flattenedLinks.length - 1 ? flattenedLinks[activeIndex + 1] : null;
-    return {
-      prev,
-      next
-    };
-  }
-
-  function flatten(links: NavItemWithChildren[]): NavItem[] {
-    return links
-      .reduce<NavItem[]>((flat, link) => {
-        return flat.concat(link.items?.length ? flatten(link.items) : link);
-      }, [])
-      .filter((link) => !link?.disabled);
-  }
-
-  $: pager = getPagerForDoc($page.params.slug);
-</script>
-
-<div class="flex flex-row items-center justify-between">
-  {#if pager?.prev?.href}
-    <Button href={pager.prev.href} variant="outline">
-      <Icons.chevronLeft class="mr-2 h-4 w-4" />
-      {pager.prev.title}
-    </Button>
-  {/if}
-  {#if pager?.next?.href}
-    <Button href={pager.next.href} variant="outline">
-      {pager.next.title}
-      <Icons.chevronRight class="ml-2 h-4 w-4" />
-    </Button>
-  {/if}
-</div>

package/templates/sveltekit/src/lib/components/docs/HexToChannels.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-  import { Input } from '$components/ui/input';
-  import { Label } from '$components/ui/label';
-  import { hexToHsl, hexToRgb } from '$lib/utils';
-  import { CopyButton } from '.';
-
-  let hex = '#030711';
-  let hsl: [number, number, number] = [0, 0, 0];
-  let rgb: [number, number, number] = [0, 0, 0];
-  $: if (hex && ((hex.length === 6 && hex[0] !== '#') || (hex.length === 7 && hex[0] === '#'))) {
-    hsl = hexToHsl(hex);
-    rgb = hexToRgb(hex);
-  }
-
-  $: hslString = `${hsl[0]} ${hsl[1]}% ${hsl[2]}%`;
-  $: rgbString = `${rgb[0]} ${rgb[1]} ${rgb[2]}`;
-</script>
-
-<div
-  class="mt-2 flex h-[300px] items-center justify-center rounded-md border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
->
-  <div class="mx-auto w-full max-w-sm space-y-6 py-4">
-    <div class="grid gap-2">
-      <Label for="hex">HEX</Label>
-      <Input name="hex" bind:value={hex} maxlength="7" />
-    </div>
-    <div class="relative grid gap-2">
-      <CopyButton class="absolute right-2 top-[30px]" value={hslString} />
-      <Label for="hsl">HSL</Label>
-      <Input name="hsl" value={hslString} readonly />
-    </div>
-    <div class="relative grid gap-2">
-      <CopyButton class="absolute right-2 top-[30px]" value={rgbString} />
-      <Label for="rgb">RGB</Label>
-      <Input name="rgb" value={rgbString} readonly />
-    </div>
-  </div>
-</div>

package/templates/sveltekit/src/lib/components/docs/ManualInstall.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger
-  } from '$components/ui/accordion';
-</script>
-
-<Accordion type="single" collapsible>
-  <AccordionItem value="manual-installation">
-    <AccordionTrigger>Manual Installation</AccordionTrigger>
-    <AccordionContent>
-      <slot />
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>

package/templates/sveltekit/src/lib/components/docs/Metadata.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores';
-  import { siteConfig } from '$lib/config/site';
-
-  export let title: string = siteConfig.name;
-
-  $: title = $page.data?.title ? `${$page.data.title} - ${siteConfig.name}` : siteConfig.name;
-</script>
-
-<svelte:head>
-  <title>{title}</title>
-  <meta name="description" content={siteConfig.description} />
-  <meta name="keywords" content={siteConfig.keywords} />
-  <meta name="author" content="huntabyte" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:site" content={siteConfig.url} />
-  <meta name="twitter:title" content={title} />
-  <meta name="twitter:description" content={siteConfig.description} />
-  <meta name="twitter:image" content="https://shadcn-svelte.com/og.jpg" />
-  <meta name="twitter:image:alt" content={siteConfig.name} />
-  <meta name="twitter:creator" content="huntabyte" />
-  <meta property="og:title" content={title} />
-  <meta property="og:type" content="article" />
-  <meta property="og:url" content={siteConfig.url + $page.url.pathname} />
-  <meta property="og:image" content="https://shadcn-svelte.com/og.jpg" />
-  <meta property="og:image:alt" content={siteConfig.name} />
-  <meta property="og:image:width" content="1200" />
-  <meta property="og:image:height" content="630" />
-  <meta property="og:description" content={siteConfig.description} />
-  <meta property="og:site_name" content={siteConfig.name} />
-  <meta property="og:locale" content="EN_US" />
-  <link rel="shortcut icon" href="/favicon-16x16.png" />
-  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-</svelte:head>

package/templates/sveltekit/src/lib/components/docs/SiteFooter.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import { siteConfig } from '$lib/config/site';
-  import { Icons } from './icons';
-</script>
-
-<footer class="border-t py-6 md:py-0">
-  <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-    <div class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
-      <Icons.logo class="hidden h-6 w-6 md:inline-block" />
-      <p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
-        Built & designed by{' '}
-        <a
-          href={siteConfig.links.shadTwitter}
-          target="_blank"
-          rel="noreferrer"
-          class="font-medium underline underline-offset-4"
-        >
-          shadcn
-        </a>
-        . Ported to Svelte by{' '}
-        <a
-          href={siteConfig.links.twitter}
-          target="_blank"
-          rel="noreferrer"
-          class="font-medium underline underline-offset-4"
-        >
-          huntabyte
-        </a>
-        . The source code is available on{' '}
-        <a
-          href={siteConfig.links.github}
-          target="_blank"
-          rel="noreferrer"
-          class="font-medium underline underline-offset-4"
-        >
-          GitHub
-        </a>
-        .
-      </p>
-    </div>
-  </div>
-</footer>

package/templates/sveltekit/src/lib/components/docs/SiteHeader.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-  import { Icons, LightSwitch, MainNav, MobileNav } from '$components/docs';
-  import { buttonVariants } from '$components/ui/button';
-  import { siteConfig } from '$lib/config/site';
-  import { cn } from '$lib/utils';
-</script>
-
-<header
-  class="supports-backdrop-blur:bg-background/60 sticky top-0 z-40 w-full border-b bg-background/95 shadow-sm backdrop-blur"
->
-  <div class="container flex h-14 items-center">
-    <MainNav />
-    <MobileNav />
-    <div class="flex flex-1 items-center justify-between space-x-2 sm:space-x-4 md:justify-end">
-      <div class="w-full flex-1 md:w-auto md:flex-none">
-        <!-- Command Menu Here -->
-      </div>
-      <nav class="flex items-center space-x-1">
-        <a href={siteConfig.links.github} target="_blank" rel="noreferrer">
-          <div
-            class={cn(
-              buttonVariants({
-                size: 'sm',
-                variant: 'ghost'
-              }),
-              'w-9 px-0'
-            )}
-          >
-            <Icons.gitHub class="h-5 w-5" />
-            <span class="sr-only">GitHub</span>
-          </div>
-        </a>
-        <a href={siteConfig.links.shadTwitter} target="_blank" rel="noreferrer">
-          <div
-            class={cn(
-              buttonVariants({
-                size: 'sm',
-                variant: 'ghost'
-              }),
-              'w-9 px-0'
-            )}
-          >
-            <Icons.twitter class="h-5 w-5 fill-current" />
-            <span class="sr-only">Twitter</span>
-          </div>
-        </a>
-        <LightSwitch />
-      </nav>
-    </div>
-  </div>
-</header>

package/templates/sveltekit/src/lib/components/docs/Steps.svelte

@@ -1,3 +0,0 @@
-<div class="[&>h3]:step mb-12 ml-4 border-l pl-8 [counter-reset:step]" {...$$restProps}>
-  <slot />
-</div>

package/templates/sveltekit/src/lib/components/docs/TableOfContents.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import type { TableOfContents, TableOfContentsItem } from '$lib/types/docs';
-  import { onMount } from 'svelte';
-  import { Tree } from '$components/docs';
-
-  let filteredHeadingsList: TableOfContents;
-
-  function getHeadingsWithHierarchy(divId: string) {
-    const div = document.getElementById(divId);
-
-    if (!div) {
-      return { items: [] };
-    }
-
-    const headings: HTMLHeadingElement[] = Array.from(div.querySelectorAll('h2, h3'));
-    const hierarchy: TableOfContents = { items: [] };
-    let currentLevel: TableOfContentsItem | undefined = undefined;
-
-    headings.forEach((heading: HTMLHeadingElement) => {
-      const level = parseInt(heading.tagName.charAt(1));
-      if (!heading.id) {
-        let newId = heading.innerText
-          .replaceAll(/[^a-zA-Z0-9 ]/g, '')
-          .replaceAll(' ', '-')
-          .toLowerCase();
-        heading.id = `${newId}`;
-      }
-
-      const item: TableOfContentsItem = {
-        title: heading.textContent || '',
-        url: `#${heading.id}`,
-        items: []
-      };
-
-      if (level === 2) {
-        hierarchy.items.push(item);
-        currentLevel = item;
-      } else if (level === 3 && currentLevel?.items) {
-        currentLevel.items.push(item);
-      }
-    });
-
-    filteredHeadingsList = hierarchy;
-  }
-
-  // Lifecycle
-  onMount(() => {
-    getHeadingsWithHierarchy('mdsvex');
-  });
-</script>
-
-<div class="space-y-2">
-  <p class="font-medium">On This Page</p>
-  <Tree tree={filteredHeadingsList} />
-</div>

package/templates/sveltekit/src/lib/components/docs/Tree.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import type { TableOfContents } from '$lib/types/docs';
-  import { page } from '$app/stores';
-  import { cn } from '$lib/utils';
-
-  export let tree: TableOfContents = {
-    items: []
-  };
-  export let level = 1;
-</script>
-
-<ul class={cn('m-0 list-none', { 'pl-4': level !== 1 })}>
-  {#if tree.items && tree.items.length}
-    {#each tree.items as item, i (i)}
-      <li class={cn('mt-0 pt-2')}>
-        <a
-          href={item.url}
-          class={cn(
-            'inline-block no-underline transition-colors hover:text-foreground',
-            item.url === $page.url.hash ? 'font-medium text-foreground' : 'text-muted-foreground'
-          )}
-        >
-          {item.title}
-        </a>
-        {#if item.items && item.items.length}
-          <svelte:self tree={item} level={level + 1} />
-        {/if}
-      </li>
-    {/each}
-  {/if}
-</ul>

package/templates/sveltekit/src/lib/components/docs/examples/accordion/AccordionDemo.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger
-  } from '$components/ui/accordion';
-</script>
-
-<Accordion type="single" collapsible class="w-full">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Is it styled?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It comes with default styles that matches the other components' aesthetic.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-3">
-    <AccordionTrigger>Is it animated?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It's animated by default, but you can disable it if you prefer.
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>

package/templates/sveltekit/src/lib/components/docs/examples/accordion/index.ts

@@ -1 +0,0 @@
-export { default as AccordionDemo } from './AccordionDemo.svelte';