create-tauri-ui 0.3.2 → 0.3.3

package/templates/sveltekit/src/lib/components/docs/light-switch/local-storage-store.ts

@@ -1,81 +1,81 @@
-// Source: https://github.com/joshnuss/svelte-local-storage-store
-// https://github.com/joshnuss/svelte-local-storage-store/blob/master/index.ts
-// Represents version v0.4.0 (2023-01-18)
-import type { Writable } from 'svelte/store';
-import { BROWSER } from 'esm-env';
-import { get, writable as internal } from 'svelte/store';
-
-declare type Updater<T> = (value: T) => T;
-declare type StoreDict<T> = { [key: string]: Writable<T> };
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const stores: StoreDict<any> = {};
-
-interface Serializer<T> {
-  parse(text: string): T;
-  stringify(object: T): string;
-}
-
-type StorageType = 'local' | 'session';
-
-interface Options<T> {
-  serializer?: Serializer<T>;
-  storage?: StorageType;
-}
-
-function getStorage(type: StorageType) {
-  return type === 'local' ? localStorage : sessionStorage;
-}
-
-export function localStorageStore<T>(
-  key: string,
-  initialValue: T,
-  options?: Options<T>
-): Writable<T> {
-  const serializer = options?.serializer ?? JSON;
-  const storageType = options?.storage ?? 'local';
-
-  function updateStorage(key: string, value: T) {
-    if (!BROWSER) return;
-
-    getStorage(storageType).setItem(key, serializer.stringify(value));
-  }
-
-  if (!stores[key]) {
-    const store = internal(initialValue, (set) => {
-      const json = BROWSER ? getStorage(storageType).getItem(key) : null;
-
-      if (json) {
-        set(<T>serializer.parse(json));
-      }
-
-      if (BROWSER) {
-        const handleStorage = (event: StorageEvent) => {
-          if (event.key === key) set(event.newValue ? serializer.parse(event.newValue) : null);
-        };
-
-        window.addEventListener('storage', handleStorage);
-
-        return () => window.removeEventListener('storage', handleStorage);
-      }
-    });
-
-    const { subscribe, set } = store;
-
-    stores[key] = {
-      set(value: T) {
-        updateStorage(key, value);
-        set(value);
-      },
-      update(updater: Updater<T>) {
-        const value = updater(get(store));
-
-        updateStorage(key, value);
-        set(value);
-      },
-      subscribe
-    };
-  }
-
-  return stores[key];
-}
+// Source: https://github.com/joshnuss/svelte-local-storage-store
+// https://github.com/joshnuss/svelte-local-storage-store/blob/master/index.ts
+// Represents version v0.4.0 (2023-01-18)
+import type { Writable } from 'svelte/store';
+import { BROWSER } from 'esm-env';
+import { get, writable as internal } from 'svelte/store';
+
+declare type Updater<T> = (value: T) => T;
+declare type StoreDict<T> = { [key: string]: Writable<T> };
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const stores: StoreDict<any> = {};
+
+interface Serializer<T> {
+  parse(text: string): T;
+  stringify(object: T): string;
+}
+
+type StorageType = 'local' | 'session';
+
+interface Options<T> {
+  serializer?: Serializer<T>;
+  storage?: StorageType;
+}
+
+function getStorage(type: StorageType) {
+  return type === 'local' ? localStorage : sessionStorage;
+}
+
+export function localStorageStore<T>(
+  key: string,
+  initialValue: T,
+  options?: Options<T>
+): Writable<T> {
+  const serializer = options?.serializer ?? JSON;
+  const storageType = options?.storage ?? 'local';
+
+  function updateStorage(key: string, value: T) {
+    if (!BROWSER) return;
+
+    getStorage(storageType).setItem(key, serializer.stringify(value));
+  }
+
+  if (!stores[key]) {
+    const store = internal(initialValue, (set) => {
+      const json = BROWSER ? getStorage(storageType).getItem(key) : null;
+
+      if (json) {
+        set(<T>serializer.parse(json));
+      }
+
+      if (BROWSER) {
+        const handleStorage = (event: StorageEvent) => {
+          if (event.key === key) set(event.newValue ? serializer.parse(event.newValue) : null);
+        };
+
+        window.addEventListener('storage', handleStorage);
+
+        return () => window.removeEventListener('storage', handleStorage);
+      }
+    });
+
+    const { subscribe, set } = store;
+
+    stores[key] = {
+      set(value: T) {
+        updateStorage(key, value);
+        set(value);
+      },
+      update(updater: Updater<T>) {
+        const value = updater(get(store));
+
+        updateStorage(key, value);
+        set(value);
+      },
+      subscribe
+    };
+  }
+
+  return stores[key];
+}

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

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

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

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

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

@@ -1,4 +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';
+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

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

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

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

@@ -1,3 +1,3 @@
-export { default as Alert } from './Alert.svelte';
-export { default as AlertDescription } from './AlertDescription.svelte';
-export { default as AlertTitle } from './AlertTitle.svelte';
+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

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

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

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

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

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

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

@@ -1,15 +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}
-/>
+<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}
+/>