create-tauri-ui 0.3.2 → 0.3.3

package/templates/sveltekit/src/lib/config/site.ts

@@ -1,15 +1,15 @@
-export const siteConfig = {
-  name: 'shadcn-svelte',
-  url: 'https://shadcn-svelte.com',
-  ogImage: 'https://shadcn-svelte.com/og.jpg',
-  description: 'Beautifully designed components built with Radix Svelte and Tailwind CSS.',
-  links: {
-    twitter: 'https://twitter.com/huntabyte',
-    github: 'https://github.com/huntabyte/shadcn-svelte',
-    shadTwitter: 'https://twitter.com/shadcn',
-    shadGithub: 'https://github.com/shadcn/ui'
-  },
-  keywords: `shadcn,Svelte,SvelteKit,Svelte Components,TailwindCSS,Radix Svelte`
-};
-
-export type SiteConfig = typeof siteConfig;
+export const siteConfig = {
+  name: 'shadcn-svelte',
+  url: 'https://shadcn-svelte.com',
+  ogImage: 'https://shadcn-svelte.com/og.jpg',
+  description: 'Beautifully designed components built with Radix Svelte and Tailwind CSS.',
+  links: {
+    twitter: 'https://twitter.com/huntabyte',
+    github: 'https://github.com/huntabyte/shadcn-svelte',
+    shadTwitter: 'https://twitter.com/shadcn',
+    shadGithub: 'https://github.com/shadcn/ui'
+  },
+  keywords: `shadcn,Svelte,SvelteKit,Svelte Components,TailwindCSS,Radix Svelte`
+};
+
+export type SiteConfig = typeof siteConfig;

package/templates/sveltekit/src/lib/types/docs.ts

@@ -1,50 +1,50 @@
-export type Metadata = {
-  title: string;
-  description: string;
-  openGraph: {
-    title: string;
-    description: string;
-    type: 'article';
-    url: string;
-    images: [
-      {
-        url: string;
-        width: number;
-        height: number;
-        alt: string;
-      }
-    ];
-  };
-  twitter: {
-    card: 'summary_large_image';
-    title: string;
-    description: string;
-    images: string[];
-    creator: string;
-  };
-};
-
-export type FrontMatter = {
-  title: string;
-  description: string;
-  component: boolean;
-  source: string;
-  radix?: string;
-};
-
-export type DocFile = {
-  default: import('svelte/internal').SvelteComponent;
-  metadata: FrontMatter;
-};
-
-export type DocResolver = () => Promise<DocFile>;
-
-export type TableOfContentsItem = {
-  title: string;
-  url: string;
-  items?: TableOfContentsItem[];
-};
-
-export type TableOfContents = {
-  items: TableOfContentsItem[];
-};
+export type Metadata = {
+  title: string;
+  description: string;
+  openGraph: {
+    title: string;
+    description: string;
+    type: 'article';
+    url: string;
+    images: [
+      {
+        url: string;
+        width: number;
+        height: number;
+        alt: string;
+      }
+    ];
+  };
+  twitter: {
+    card: 'summary_large_image';
+    title: string;
+    description: string;
+    images: string[];
+    creator: string;
+  };
+};
+
+export type FrontMatter = {
+  title: string;
+  description: string;
+  component: boolean;
+  source: string;
+  radix?: string;
+};
+
+export type DocFile = {
+  default: import('svelte/internal').SvelteComponent;
+  metadata: FrontMatter;
+};
+
+export type DocResolver = () => Promise<DocFile>;
+
+export type TableOfContentsItem = {
+  title: string;
+  url: string;
+  items?: TableOfContentsItem[];
+};
+
+export type TableOfContents = {
+  items: TableOfContentsItem[];
+};

package/templates/sveltekit/src/lib/types/nav.ts

@@ -1,18 +1,18 @@
-import type { Icons } from '$components/docs/icons';
-
-export type NavItem = {
-  title: string;
-  href?: string;
-  disabled?: boolean;
-  external?: boolean;
-  icon?: keyof typeof Icons;
-  label?: string;
-};
-
-export type SidebarNavItem = NavItem & {
-  items: SidebarNavItem[];
-};
-
-export type NavItemWithChildren = NavItem & {
-  items: NavItemWithChildren[];
-};
+import type { Icons } from '$components/docs/icons';
+
+export type NavItem = {
+  title: string;
+  href?: string;
+  disabled?: boolean;
+  external?: boolean;
+  icon?: keyof typeof Icons;
+  label?: string;
+};
+
+export type SidebarNavItem = NavItem & {
+  items: SidebarNavItem[];
+};
+
+export type NavItemWithChildren = NavItem & {
+  items: NavItemWithChildren[];
+};

package/templates/sveltekit/src/lib/utils.ts

@@ -1,75 +1,75 @@
-import type { ClassValue } from 'clsx';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export function slugFromPath(path: string) {
-  return path.replace('/src/content/', '').replace('.md', '');
-}
-
-export function hexToHsl(hex: string): [number, number, number] {
-  if (hex) {
-    const sanitizedHex = hex.replace('#', '');
-
-    const red = parseInt(sanitizedHex.substring(0, 2), 16);
-    const green = parseInt(sanitizedHex.substring(2, 4), 16);
-    const blue = parseInt(sanitizedHex.substring(4, 6), 16);
-
-    const normalizedRed = red / 255;
-    const normalizedGreen = green / 255;
-    const normalizedBlue = blue / 255;
-
-    const max = Math.max(normalizedRed, normalizedGreen, normalizedBlue);
-    const min = Math.min(normalizedRed, normalizedGreen, normalizedBlue);
-
-    let hue, saturation, lightness;
-
-    if (max === min) {
-      hue = 0;
-    } else if (max === normalizedRed) {
-      hue = ((normalizedGreen - normalizedBlue) / (max - min)) % 6;
-    } else if (max === normalizedGreen) {
-      hue = (normalizedBlue - normalizedRed) / (max - min) + 2;
-    } else {
-      hue = (normalizedRed - normalizedGreen) / (max - min) + 4;
-    }
-
-    hue = Math.round(hue * 60);
-
-    if (hue < 0) {
-      hue += 360;
-    }
-
-    lightness = (max + min) / 2;
-
-    if (max === min) {
-      saturation = 0;
-    } else if (lightness <= 0.5) {
-      saturation = (max - min) / (max + min);
-    } else {
-      saturation = (max - min) / (2 - max - min);
-    }
-
-    saturation = Math.round(saturation * 100);
-    lightness = Math.round(lightness * 100);
-
-    return [hue, saturation, lightness];
-  }
-  return [0, 0, 0];
-}
-
-export function hexToRgb(hex: string): [number, number, number] {
-  if (hex) {
-    const sanitizedHex = hex.replace('#', '');
-
-    const red = parseInt(sanitizedHex.substring(0, 2), 16);
-    const green = parseInt(sanitizedHex.substring(2, 4), 16);
-    const blue = parseInt(sanitizedHex.substring(4, 6), 16);
-
-    return [red, green, blue];
-  }
-  return [0, 0, 0];
-}
+import type { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function slugFromPath(path: string) {
+  return path.replace('/src/content/', '').replace('.md', '');
+}
+
+export function hexToHsl(hex: string): [number, number, number] {
+  if (hex) {
+    const sanitizedHex = hex.replace('#', '');
+
+    const red = parseInt(sanitizedHex.substring(0, 2), 16);
+    const green = parseInt(sanitizedHex.substring(2, 4), 16);
+    const blue = parseInt(sanitizedHex.substring(4, 6), 16);
+
+    const normalizedRed = red / 255;
+    const normalizedGreen = green / 255;
+    const normalizedBlue = blue / 255;
+
+    const max = Math.max(normalizedRed, normalizedGreen, normalizedBlue);
+    const min = Math.min(normalizedRed, normalizedGreen, normalizedBlue);
+
+    let hue, saturation, lightness;
+
+    if (max === min) {
+      hue = 0;
+    } else if (max === normalizedRed) {
+      hue = ((normalizedGreen - normalizedBlue) / (max - min)) % 6;
+    } else if (max === normalizedGreen) {
+      hue = (normalizedBlue - normalizedRed) / (max - min) + 2;
+    } else {
+      hue = (normalizedRed - normalizedGreen) / (max - min) + 4;
+    }
+
+    hue = Math.round(hue * 60);
+
+    if (hue < 0) {
+      hue += 360;
+    }
+
+    lightness = (max + min) / 2;
+
+    if (max === min) {
+      saturation = 0;
+    } else if (lightness <= 0.5) {
+      saturation = (max - min) / (max + min);
+    } else {
+      saturation = (max - min) / (2 - max - min);
+    }
+
+    saturation = Math.round(saturation * 100);
+    lightness = Math.round(lightness * 100);
+
+    return [hue, saturation, lightness];
+  }
+  return [0, 0, 0];
+}
+
+export function hexToRgb(hex: string): [number, number, number] {
+  if (hex) {
+    const sanitizedHex = hex.replace('#', '');
+
+    const red = parseInt(sanitizedHex.substring(0, 2), 16);
+    const green = parseInt(sanitizedHex.substring(2, 4), 16);
+    const blue = parseInt(sanitizedHex.substring(4, 6), 16);
+
+    return [red, green, blue];
+  }
+  return [0, 0, 0];
+}

package/templates/sveltekit/src/routes/+layout.svelte

@@ -1,48 +1,48 @@
-<script lang="ts">
-  import { dev } from '$app/environment';
-  import '../styles/globals.css';
-  import { WindowTitlebar } from '@tauri-controls/svelte';
-
-  import { ExamplesNav, TailwindIndicator } from '$components/docs';
-  import { cn } from '$lib/utils';
-  import { Sailboat } from 'lucide-svelte';
-
-  import { onMount } from 'svelte';
-  import LightSwitch from '$components/docs/light-switch/LightSwitch.svelte';
-  import type { WebviewWindow } from '@tauri-apps/plugin-window';
-
-  let appWindow: WebviewWindow;
-
-  const closeWindow = async () => {
-    appWindow.close();
-  };
-
-  onMount(async () => {
-    const { appWindow: windowPlugin } = await import('@tauri-apps/plugin-window');
-    appWindow = windowPlugin;
-  });
-</script>
-
-<div class="h-screen overflow-clip">
-  <WindowTitlebar class="ml-2">
-    <div class="pl-2 flex items-center p-1">
-      <Sailboat class="h-5 w-5 " />
-
-      <ExamplesNav data-tauri-drag-region class="pl-1" />
-      <LightSwitch />
-    </div>
-  </WindowTitlebar>
-
-  <div
-    class={cn(
-      'h-screen overflow-auto border-t bg-background pb-8',
-      // "scrollbar-none"
-      'scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-md'
-    )}
-  >
-    <slot />
-  </div>
-  {#if dev}
-    <TailwindIndicator />
-  {/if}
-</div>
+<script lang="ts">
+  import { dev } from '$app/environment';
+  import '../styles/globals.css';
+  import { WindowTitlebar } from '@tauri-controls/svelte';
+
+  import { ExamplesNav, TailwindIndicator } from '$components/docs';
+  import { cn } from '$lib/utils';
+  import { Sailboat } from 'lucide-svelte';
+
+  import { onMount } from 'svelte';
+  import LightSwitch from '$components/docs/light-switch/LightSwitch.svelte';
+  import type { WebviewWindow } from '@tauri-apps/plugin-window';
+
+  let appWindow: WebviewWindow;
+
+  const closeWindow = async () => {
+    appWindow.close();
+  };
+
+  onMount(async () => {
+    const { appWindow: windowPlugin } = await import('@tauri-apps/plugin-window');
+    appWindow = windowPlugin;
+  });
+</script>
+
+<div class="h-screen overflow-clip">
+  <WindowTitlebar class="ml-2">
+    <div class="pl-2 flex items-center p-1">
+      <Sailboat class="h-5 w-5 " />
+
+      <ExamplesNav data-tauri-drag-region class="pl-1" />
+      <LightSwitch />
+    </div>
+  </WindowTitlebar>
+
+  <div
+    class={cn(
+      'h-screen overflow-auto border-t bg-background pb-8',
+      // "scrollbar-none"
+      'scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-md'
+    )}
+  >
+    <slot />
+  </div>
+  {#if dev}
+    <TailwindIndicator />
+  {/if}
+</div>

package/templates/sveltekit/src/routes/+page.ts

@@ -1,6 +1,6 @@
-import type { PageLoad } from './$types';
-import { redirect } from '@sveltejs/kit';
-
-export const load: PageLoad = async () => {
-  throw redirect(302, '/dashboard');
-};
+import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageLoad = async () => {
+  throw redirect(302, '/dashboard');
+};

package/templates/sveltekit/src/routes/authentication/+page.svelte

@@ -1,57 +1,57 @@
-<script lang="ts">
-  import { Button } from '$components/ui/button';
-  import UserAuthForm from './UserAuthForm.svelte';
-</script>
-
-<div
-  class="container relative h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0"
->
-  <Button
-    href="/examples/authentication"
-    variant="ghost"
-    class="absolute right-4 top-4 md:right-8 md:top-8"
-  >
-    Login
-  </Button>
-  <div class="relative h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
-    <div
-      class="absolute inset-0 bg-cover"
-      style="
-				background-image:
-					url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);"
-    />
-    <div class="relative z-20 flex items-center text-lg font-medium">
-      <!-- <Command class="mr-2 h-6 w-6" /> -->
-      Acme Inc
-    </div>
-    <div class="relative z-20 mt-auto">
-      <blockquote class="space-y-2">
-        <p class="text-lg">
-          &ldquo;This library has saved me countless hours of work and helped me deliver stunning
-          designs to my clients faster than ever before. Highly recommended!&rdquo;
-        </p>
-        <footer class="text-sm">Sofia Davis</footer>
-      </blockquote>
-    </div>
-  </div>
-  <div class="lg:p-8">
-    <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-      <div class="flex flex-col space-y-2 text-center">
-        <h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
-        <p class="text-sm text-muted-foreground">Enter your email below to create your account</p>
-      </div>
-      <UserAuthForm />
-      <p class="px-8 text-center text-sm text-muted-foreground">
-        By clicking continue, you agree to our{' '}
-        <a href="/terms" class="underline underline-offset-4 hover:text-primary">
-          Terms of Service
-        </a>{' '}
-        and{' '}
-        <a href="/privacy" class="underline underline-offset-4 hover:text-primary">
-          Privacy Policy
-        </a>
-        .
-      </p>
-    </div>
-  </div>
-</div>
+<script lang="ts">
+  import { Button } from '$components/ui/button';
+  import UserAuthForm from './UserAuthForm.svelte';
+</script>
+
+<div
+  class="container relative h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0"
+>
+  <Button
+    href="/examples/authentication"
+    variant="ghost"
+    class="absolute right-4 top-4 md:right-8 md:top-8"
+  >
+    Login
+  </Button>
+  <div class="relative h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+    <div
+      class="absolute inset-0 bg-cover"
+      style="
+				background-image:
+					url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);"
+    />
+    <div class="relative z-20 flex items-center text-lg font-medium">
+      <!-- <Command class="mr-2 h-6 w-6" /> -->
+      Acme Inc
+    </div>
+    <div class="relative z-20 mt-auto">
+      <blockquote class="space-y-2">
+        <p class="text-lg">
+          &ldquo;This library has saved me countless hours of work and helped me deliver stunning
+          designs to my clients faster than ever before. Highly recommended!&rdquo;
+        </p>
+        <footer class="text-sm">Sofia Davis</footer>
+      </blockquote>
+    </div>
+  </div>
+  <div class="lg:p-8">
+    <div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+      <div class="flex flex-col space-y-2 text-center">
+        <h1 class="text-2xl font-semibold tracking-tight">Create an account</h1>
+        <p class="text-sm text-muted-foreground">Enter your email below to create your account</p>
+      </div>
+      <UserAuthForm />
+      <p class="px-8 text-center text-sm text-muted-foreground">
+        By clicking continue, you agree to our{' '}
+        <a href="/terms" class="underline underline-offset-4 hover:text-primary">
+          Terms of Service
+        </a>{' '}
+        and{' '}
+        <a href="/privacy" class="underline underline-offset-4 hover:text-primary">
+          Privacy Policy
+        </a>
+        .
+      </p>
+    </div>
+  </div>
+</div>

package/templates/sveltekit/src/routes/authentication/+page.ts

@@ -1,7 +1,7 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = async () => {
-  return {
-    title: 'Authentication Example'
-  };
-};
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+  return {
+    title: 'Authentication Example'
+  };
+};