create-tauri-ui 0.1.3 → 0.1.5

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

@@ -0,0 +1,150 @@
+---
+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/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest';
+
+describe('sum test', () => {
+  it('adds 1 + 2 to equal 3', () => {
+    expect(1 + 2).toBe(3);
+  });
+});

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,55 @@
+<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/TailwindIndicator.svelte

@@ -0,0 +1,10 @@
+<div
+  class="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white"
+>
+  <div class="block sm:hidden">xs</div>
+  <div class="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
+  <div class="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
+  <div class="hidden lg:block xl:hidden 2xl:hidden">lg</div>
+  <div class="hidden xl:block 2xl:hidden">xl</div>
+  <div class="hidden 2xl:block">2xl</div>
+</div>

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

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