create-tauri-ui 0.1.3 → 0.1.5

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

@@ -0,0 +1,37 @@
+<!-- MDsveX Layout Component -->
+<script context="module">
+  import '../../../../styles/mdsvex.css';
+  import {
+    a,
+    blockquote,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    hr,
+    img,
+    li,
+    ol,
+    p,
+    pre,
+    table,
+    td,
+    th,
+    tr,
+    ul
+  } from '$components/docs/mdsvex';
+
+  export { a, blockquote, h1, h2, h3, h4, h5, h6, hr, img, li, ol, p, pre, table, td, th, tr, ul };
+</script>
+
+<script lang="ts">
+  export let title = '';
+  export let description = '';
+  export let source = '';
+  export let component = '';
+  export let radix = '';
+</script>
+
+<slot />

package/templates/sveltekit/src/lib/components/docs/mdsvex/ol.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<ol class={cn('my-6 ml-6 list-decimal', className)} {...$$restProps}>
+  <slot />
+</ol>

package/templates/sveltekit/src/lib/components/docs/mdsvex/p.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<p class={cn('leading-7 [&:not(:first-child)]:mt-6', className)} {...$$restProps}>
+  <slot />
+</p>

package/templates/sveltekit/src/lib/components/docs/mdsvex/pre.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { CopyButton } from '$components/docs';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+
+  let codeString: string;
+
+  function copyCodeToClipboard(node: HTMLPreElement) {
+    codeString = node.innerText.trim() ?? '';
+  }
+</script>
+
+<pre
+  use:copyCodeToClipboard
+  class={cn(
+    'mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4 data-[theme=dark]:bg-background data-[theme=light]:bg-white',
+    className
+  )}
+  {...$$restProps}>
+	<slot />
+</pre>
+<CopyButton value={codeString} class={cn('pre-copy-btn absolute right-4 top-4')} />

package/templates/sveltekit/src/lib/components/docs/mdsvex/table.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<div class="my-6 w-full overflow-y-auto">
+  <table class={cn('w-full', className)} {...$$restProps}>
+    <slot />
+  </table>
+</div>

package/templates/sveltekit/src/lib/components/docs/mdsvex/td.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<td
+  class={cn(
+    'border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+</td>

package/templates/sveltekit/src/lib/components/docs/mdsvex/th.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<th
+  class={cn(
+    'border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+</th>

package/templates/sveltekit/src/lib/components/docs/mdsvex/tr.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<tr class={cn('m-0 border-t p-0 even:bg-muted', className)} {...$$restProps}>
+  <slot />
+</tr>

package/templates/sveltekit/src/lib/components/docs/mdsvex/ul.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<ul class={cn('my-6 ml-6 list-disc', className)} {...$$restProps}>
+  <slot />
+</ul>

package/templates/sveltekit/src/lib/components/docs/nav/DocsSidebarNav.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { SidebarNavItem } from '$lib/types/nav';
+  import { cn } from '$lib/utils';
+  import DocsSidebarNavItems from './DocsSidebarNavItems.svelte';
+
+  export let items: SidebarNavItem[] = [];
+</script>
+
+{#if items.length}
+  <div class="w-full">
+    {#each items as item, index (index)}
+      <div class={cn('pb-4')}>
+        <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
+          {item.title}
+        </h4>
+        {#if item?.items}
+          {#if item?.items?.length}
+            <DocsSidebarNavItems items={item.items} />
+          {/if}
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/if}

package/templates/sveltekit/src/lib/components/docs/nav/DocsSidebarNavItems.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { SidebarNavItem } from '$lib/types/nav';
+  import { page } from '$app/stores';
+  import { cn } from '$lib/utils';
+
+  export let items: SidebarNavItem[] = [];
+</script>
+
+{#if items.length}
+  <div class="grid grid-flow-row auto-rows-max text-sm">
+    {#each items as item, index (index)}
+      {#if item.href}
+        <a
+          href={item.href}
+          class={cn(
+            'group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline',
+            item.disabled && 'cursor-not-allowed opacity-60',
+            $page.url.pathname === item.href
+              ? 'font-medium text-foreground'
+              : 'text-muted-foreground'
+          )}
+          target={item.external ? '_blank' : ''}
+          rel={item.external ? 'noreferrer' : ''}
+        >
+          {item.title}
+          {#if item.label}
+            <span
+              class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline"
+            >
+              {item.label}
+            </span>
+          {/if}
+        </a>
+      {:else}
+        <span
+          class="flex w-full cursor-not-allowed items-center rounded-md p-2 text-muted-foreground hover:underline"
+        >
+          {item.title}
+        </span>
+      {/if}
+    {/each}
+  </div>
+{/if}

package/templates/sveltekit/src/lib/components/docs/nav/MainNav.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { docsConfig } from '$lib/config/docs';
+  import { siteConfig } from '$lib/config/site';
+  import { cn } from '$lib/utils';
+  import { Icons } from '../icons';
+</script>
+
+<div class="mr-4 hidden md:flex">
+  <a href="/" class="mr-6 flex items-center space-x-2">
+    <Icons.logo class="h-6 w-6" />
+    <span class="hidden font-bold sm:inline-block">
+      {siteConfig.name}
+    </span>
+  </a>
+  <nav class="flex items-center space-x-6 text-sm font-medium">
+    {#each docsConfig.mainNav as navItem}
+      <a
+        href={navItem.href}
+        class={cn(
+          'transition-colors hover:text-foreground/80',
+          $page.url.pathname === navItem.href ? 'text-foreground' : 'text-foreground/60'
+        )}
+        target={navItem.external ? '_blank' : undefined}
+        rel={navItem.external ? 'noreferrer' : undefined}
+      >
+        {navItem.title}
+      </a>
+    {/each}
+  </nav>
+</div>

package/templates/sveltekit/src/lib/components/docs/nav/MobileLink.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { cn } from '$lib/utils';
+
+  export let href: string;
+  export let open: boolean;
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<a
+  {href}
+  on:click={() => (open = false)}
+  class={cn($page.url.pathname === href ? 'text-foreground' : 'text-foreground/60', className)}
+  {...$$restProps}
+>
+  <slot />
+</a>

package/templates/sveltekit/src/lib/components/docs/nav/MobileNav.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { SidebarOpen } from 'lucide-svelte';
+  import { Button } from '$components/ui/button';
+  import { Sheet, SheetContent, SheetTrigger } from '$components/ui/sheet';
+  import { docsConfig } from '$lib/config/docs';
+  import { siteConfig } from '$lib/config/site';
+  import { Icons } from '../icons';
+  import MobileLink from './MobileLink.svelte';
+
+  export let open = false;
+</script>
+
+<Sheet bind:open>
+  <SheetTrigger>
+    <Button
+      variant="ghost"
+      class="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+    >
+      <SidebarOpen class="h-6 w-6" />
+      <span class="sr-only">Toggle Menu</span>
+    </Button>
+  </SheetTrigger>
+  <SheetContent size="xl" position="left" class="pr-0">
+    <MobileLink href="/" class="flex items-center !text-foreground" bind:open>
+      <Icons.logo class="mr-2 h-4 w-4" />
+      <span class="font-bold">{siteConfig.name}</span>
+    </MobileLink>
+    <div class="my-4 h-[calc(100vh-8rem)] overflow-auto pb-10 pl-6">
+      <div class="flex flex-col space-y-3">
+        {#each docsConfig.mainNav as navItem, index (navItem + index.toString())}
+          {#if navItem.href}
+            <MobileLink href={navItem.href} bind:open>
+              {navItem.title}
+            </MobileLink>
+          {/if}
+        {/each}
+      </div>
+      <div class="flex flex-col space-y-2">
+        {#each docsConfig.sidebarNav as navItem, index (index)}
+          <div class="flex flex-col space-y-3 pt-6">
+            <h4 class="font-medium">{navItem.title}</h4>
+            {#if navItem?.items?.length}
+              {#each navItem.items as item}
+                {#if !item.disabled && item.href}
+                  <MobileLink href={item.href} bind:open>
+                    {item.title}
+                  </MobileLink>
+                {/if}
+              {/each}
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+  </SheetContent>
+</Sheet>

package/templates/sveltekit/src/lib/components/docs/nav/index.ts

@@ -0,0 +1,4 @@
+export { default as MainNav } from './MainNav.svelte';
+export { default as MobileNav } from './MobileNav.svelte';
+export { default as DocsSidebarNav } from './DocsSidebarNav.svelte';
+export { default as DocsSidebarNavItems } from './DocsSidebarNavItems.svelte';

package/templates/sveltekit/src/lib/components/docs/page-header/PageHeader.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<section
+  class={cn('flex max-w-[980px] flex-col items-start gap-2 px-4 pt-8 md:pt-12', className)}
+  {...$$restProps}
+>
+  <slot />
+</section>

package/templates/sveltekit/src/lib/components/docs/page-header/PageHeaderDescription.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Balancer from 'svelte-wrap-balancer';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<p class={cn('max-w-[750px] text-lg text-muted-foreground sm:text-xl', className)} {...$$restProps}>
+  <Balancer>
+    <slot />
+  </Balancer>
+</p>

package/templates/sveltekit/src/lib/components/docs/page-header/PageHeaderHeading.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<h1
+  class={cn(
+    'text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:text-6xl lg:leading-[1.1]',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+</h1>

package/templates/sveltekit/src/lib/components/docs/page-header/index.ts

@@ -0,0 +1,3 @@
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as PageHeaderDescription } from './PageHeaderDescription.svelte';
+export { default as PageHeaderHeading } from './PageHeaderHeading.svelte';

package/templates/sveltekit/src/lib/components/ui/accordion/Accordion.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'radix-svelte';
+
+  // Remove the any when radix-svelte is updated to properly satisfy the types
+  // https://www.radix-svelte.com/docs/accordion
+  export let value: any = undefined;
+</script>
+
+<AccordionPrimitive.Root bind:value {...$$restProps}>
+  <slot />
+</AccordionPrimitive.Root>

package/templates/sveltekit/src/lib/components/ui/accordion/AccordionContent.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { AccordionContentProps } from 'radix-svelte';
+  import { Accordion as AccordionPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let transition: AccordionContentProps['transition'] = true;
+</script>
+
+<AccordionPrimitive.Content
+  class={cn('overflow-hidden text-sm', className)}
+  {...$$restProps}
+  {transition}
+>
+  <div class="pb-4 pt-0">
+    <slot />
+  </div>
+</AccordionPrimitive.Content>

package/templates/sveltekit/src/lib/components/ui/accordion/AccordionItem.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { AccordionItemProps } from 'radix-svelte';
+  import { Accordion as AccordionPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let value: AccordionItemProps['value'];
+</script>
+
+<AccordionPrimitive.Item {value} class={cn('border-b', className)} {...$$restProps}>
+  <slot />
+</AccordionPrimitive.Item>

package/templates/sveltekit/src/lib/components/ui/accordion/AccordionTrigger.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { ChevronDown } from 'lucide-svelte';
+  import { Accordion as AccordionPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<AccordionPrimitive.Header class="flex">
+  <AccordionPrimitive.Trigger
+    class={cn(
+      'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+      className
+    )}
+    {...$$restProps}
+  >
+    <slot />
+    <ChevronDown class="h-4 w-4 transition-transform duration-200" />
+  </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/templates/sveltekit/src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionContent } from './AccordionContent.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as AccordionTrigger } from './AccordionTrigger.svelte';

package/templates/sveltekit/src/lib/components/ui/alert/Alert.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { VariantProps } from 'class-variance-authority';
+  import { cva } from 'class-variance-authority';
+  import { cn } from '$lib/utils';
+
+  const alertVariants = cva(
+    'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11',
+    {
+      variants: {
+        variant: {
+          default: 'bg-background text-foreground',
+          destructive:
+            'text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive'
+        }
+      },
+      defaultVariants: {
+        variant: 'default'
+      }
+    }
+  );
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let variant: VariantProps<typeof alertVariants>['variant'] = 'default';
+</script>
+
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps}>
+  <slot />
+</div>

package/templates/sveltekit/src/lib/components/ui/alert/AlertDescription.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}>
+  <slot />
+</div>

package/templates/sveltekit/src/lib/components/ui/alert/AlertTitle.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h5';
+</script>
+
+<svelte:element
+  this={level}
+  class={cn('mb-1 font-medium leading-none tracking-tight', className)}
+  {...$$restProps}
+>
+  <slot />
+</svelte:element>

package/templates/sveltekit/src/lib/components/ui/alert/index.ts

@@ -0,0 +1,3 @@
+export { default as Alert } from './Alert.svelte';
+export { default as AlertDescription } from './AlertDescription.svelte';
+export { default as AlertTitle } from './AlertTitle.svelte';

package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogAction.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'radix-svelte';
+  import { buttonVariants } from '$components/ui/button';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<AlertDialogPrimitive.Action class={cn(buttonVariants(), className)} {...$$restProps}>
+  <slot />
+</AlertDialogPrimitive.Action>

package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogCancel.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'radix-svelte';
+  import { buttonVariants } from '$components/ui/button';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<AlertDialogPrimitive.Cancel
+  class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+  {...$$restProps}
+>
+  <slot />
+</AlertDialogPrimitive.Cancel>

package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogContent.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+  import AlertDialogOverlay from './AlertDialogOverlay.svelte';
+  import AlertDialogPortal from './AlertDialogPortal.svelte';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<AlertDialogPortal>
+  <AlertDialogOverlay />
+  <AlertDialogPrimitive.Content
+    class={cn(
+      'fixed z-50 grid w-full max-w-lg scale-100 gap-4 border bg-background p-6 opacity-100 shadow-lg animate-in fade-in-90 slide-in-from-bottom-10 sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 md:w-full',
+      className
+    )}
+    {...$$restProps}
+  >
+    <slot />
+  </AlertDialogPrimitive.Content>
+</AlertDialogPortal>

package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogDescription.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<AlertDialogPrimitive.Description
+  class={cn('text-sm text-muted-foreground', className)}
+  {...$$restProps}
+>
+  <slot />
+</AlertDialogPrimitive.Description>

package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogFooter.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<div
+  class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+  {...$$restProps}
+>
+  <slot />
+</div>

package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogHeader.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...$$restProps}>
+  <slot />
+</div>

package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogOverlay.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<AlertDialogPrimitive.Overlay
+  class={cn(
+    'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-opacity animate-in fade-in',
+    className
+  )}
+  {...$$restProps}
+/>

package/templates/sveltekit/src/lib/components/ui/alert-dialog/AlertDialogPortal.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { AlertDialog as AlertDialogPrimitive } from 'radix-svelte';
+</script>
+
+<AlertDialogPrimitive.Portal {...$$restProps}>
+  <div class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
+    <slot />
+  </div>
+</AlertDialogPrimitive.Portal>