create-tauri-ui 0.3.1 → 0.3.3

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}
+/>

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

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

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

@@ -1,11 +1,11 @@
-<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.Title class={cn('text-lg font-semibold', className)} {...$$restProps}>
-  <slot />
-</AlertDialogPrimitive.Title>
+<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.Title class={cn('text-lg font-semibold', className)} {...$$restProps}>
+  <slot />
+</AlertDialogPrimitive.Title>

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

@@ -1,12 +1,12 @@
-import { AlertDialog as AlertDialogPrimitive } from 'radix-svelte';
-
-export { default as AlertDialogAction } from './AlertDialogAction.svelte';
-export { default as AlertDialogCancel } from './AlertDialogCancel.svelte';
-export { default as AlertDialogContent } from './AlertDialogContent.svelte';
-export { default as AlertDialogDescription } from './AlertDialogDescription.svelte';
-export { default as AlertDialogFooter } from './AlertDialogFooter.svelte';
-export { default as AlertDialogHeader } from './AlertDialogHeader.svelte';
-export { default as AlertDialogTitle } from './AlertDialogTitle.svelte';
-
-export const AlertDialog = AlertDialogPrimitive.Root;
-export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+import { AlertDialog as AlertDialogPrimitive } from 'radix-svelte';
+
+export { default as AlertDialogAction } from './AlertDialogAction.svelte';
+export { default as AlertDialogCancel } from './AlertDialogCancel.svelte';
+export { default as AlertDialogContent } from './AlertDialogContent.svelte';
+export { default as AlertDialogDescription } from './AlertDialogDescription.svelte';
+export { default as AlertDialogFooter } from './AlertDialogFooter.svelte';
+export { default as AlertDialogHeader } from './AlertDialogHeader.svelte';
+export { default as AlertDialogTitle } from './AlertDialogTitle.svelte';
+
+export const AlertDialog = AlertDialogPrimitive.Root;
+export const AlertDialogTrigger = AlertDialogPrimitive.Trigger;

package/templates/sveltekit/src/lib/components/ui/aspect-ratio/AspectRatio.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  import type { AspectRatioProps } from 'radix-svelte';
-  import { AspectRatio } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-  export let ratio: AspectRatioProps['ratio'] = 16 / 9;
-</script>
-
-<AspectRatio.Root {ratio} class={cn(className)} {...$$restProps}>
-  <slot />
-</AspectRatio.Root>
+<script lang="ts">
+  import type { AspectRatioProps } from 'radix-svelte';
+  import { AspectRatio } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let ratio: AspectRatioProps['ratio'] = 16 / 9;
+</script>
+
+<AspectRatio.Root {ratio} class={cn(className)} {...$$restProps}>
+  <slot />
+</AspectRatio.Root>

package/templates/sveltekit/src/lib/components/ui/aspect-ratio/index.ts

@@ -1 +1 @@
-export { default as AspectRatio } from './AspectRatio.svelte';
+export { default as AspectRatio } from './AspectRatio.svelte';

package/templates/sveltekit/src/lib/components/ui/avatar/Avatar.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-  import { Avatar as AvatarPrimitive } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<AvatarPrimitive.Root
-  class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-  {...$$restProps}
->
-  <slot />
-</AvatarPrimitive.Root>
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<AvatarPrimitive.Root
+  class={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+  {...$$restProps}
+>
+  <slot />
+</AvatarPrimitive.Root>

package/templates/sveltekit/src/lib/components/ui/avatar/AvatarFallback.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-  import { Avatar as AvatarPrimitive } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<AvatarPrimitive.Fallback
-  class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
-  {...$$restProps}
->
-  <slot />
-</AvatarPrimitive.Fallback>
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<AvatarPrimitive.Fallback
+  class={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+  {...$$restProps}
+>
+  <slot />
+</AvatarPrimitive.Fallback>

package/templates/sveltekit/src/lib/components/ui/avatar/AvatarImage.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-  import type { AvatarImageProps } from 'radix-svelte';
-  import { Avatar as AvatarPrimitive } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export let src: AvatarImageProps['src'] = undefined;
-  export let alt: AvatarImageProps['alt'] = undefined;
-  export { className as class };
-</script>
-
-<AvatarPrimitive.Image
-  {alt}
-  {src}
-  class={cn('aspect-square h-full w-full', className)}
-  {...$$restProps}
-/>
+<script lang="ts">
+  import type { AvatarImageProps } from 'radix-svelte';
+  import { Avatar as AvatarPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export let src: AvatarImageProps['src'] = undefined;
+  export let alt: AvatarImageProps['alt'] = undefined;
+  export { className as class };
+</script>
+
+<AvatarPrimitive.Image
+  {alt}
+  {src}
+  class={cn('aspect-square h-full w-full', className)}
+  {...$$restProps}
+/>

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

@@ -1,3 +1,3 @@
-export { default as Avatar } from './Avatar.svelte';
-export { default as AvatarFallback } from './AvatarFallback.svelte';
-export { default as AvatarImage } from './AvatarImage.svelte';
+export { default as Avatar } from './Avatar.svelte';
+export { default as AvatarFallback } from './AvatarFallback.svelte';
+export { default as AvatarImage } from './AvatarImage.svelte';

package/templates/sveltekit/src/lib/components/ui/badge/Badge.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-  import type { VariantProps } from 'class-variance-authority';
-  import type { HTMLAnchorAttributes } from 'svelte/elements';
-  import { cva } from 'class-variance-authority';
-  import { cn } from '$lib/utils';
-
-  const badgeVariants = cva(
-    'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-    {
-      variants: {
-        variant: {
-          default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
-          secondary:
-            'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
-          destructive:
-            'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
-          outline: 'text-foreground'
-        }
-      },
-      defaultVariants: {
-        variant: 'default'
-      }
-    }
-  );
-
-  export let href: HTMLAnchorAttributes['href'] = undefined;
-  export let variant: VariantProps<typeof badgeVariants>['variant'] = 'default';
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<svelte:element
-  this={href ? 'a' : 'span'}
-  {href}
-  class={cn(badgeVariants({ variant, className }))}
-  {...$$restProps}
->
-  <slot />
-</svelte:element>
+<script lang="ts">
+  import type { VariantProps } from 'class-variance-authority';
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+  import { cva } from 'class-variance-authority';
+  import { cn } from '$lib/utils';
+
+  const badgeVariants = cva(
+    'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+    {
+      variants: {
+        variant: {
+          default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
+          secondary:
+            'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
+          destructive:
+            'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
+          outline: 'text-foreground'
+        }
+      },
+      defaultVariants: {
+        variant: 'default'
+      }
+    }
+  );
+
+  export let href: HTMLAnchorAttributes['href'] = undefined;
+  export let variant: VariantProps<typeof badgeVariants>['variant'] = 'default';
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'span'}
+  {href}
+  class={cn(badgeVariants({ variant, className }))}
+  {...$$restProps}
+>
+  <slot />
+</svelte:element>

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

@@ -1,21 +1,21 @@
-import { cva } from 'class-variance-authority';
-
-export { default as Badge } from './Badge.svelte';
-export const badgeVariants = cva(
-  'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
-        secondary:
-          'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
-        destructive:
-          'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
-        outline: 'text-foreground'
-      }
-    },
-    defaultVariants: {
-      variant: 'default'
-    }
-  }
-);
+import { cva } from 'class-variance-authority';
+
+export { default as Badge } from './Badge.svelte';
+export const badgeVariants = cva(
+  'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
+        secondary:
+          'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
+        destructive:
+          'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
+        outline: 'text-foreground'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+);

package/templates/sveltekit/src/lib/components/ui/button/Button.svelte

@@ -1,47 +1,47 @@
-<script lang="ts">
-  import type { VariantProps } from 'class-variance-authority';
-  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils';
-  import { buttonVariants } from '.';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-  export let href: HTMLAnchorAttributes['href'] = undefined;
-  export let type: HTMLButtonAttributes['type'] = undefined;
-  export let variant: VariantProps<typeof buttonVariants>['variant'] = 'default';
-  export let size: VariantProps<typeof buttonVariants>['size'] = 'default';
-
-  type Props = {
-    class?: string | null;
-    variant?: VariantProps<typeof buttonVariants>['variant'];
-    size?: VariantProps<typeof buttonVariants>['size'];
-  };
-
-  interface AnchorElement extends Props, HTMLAnchorAttributes {
-    href?: HTMLAnchorAttributes['href'];
-    type?: never;
-  }
-
-  interface ButtonElement extends Props, HTMLButtonAttributes {
-    type?: HTMLButtonAttributes['type'];
-    href?: never;
-  }
-
-  type $$Props = AnchorElement | ButtonElement;
-</script>
-
-<svelte:element
-  this={href ? 'a' : 'button'}
-  type={href ? undefined : type}
-  {href}
-  class={cn(buttonVariants({ variant, size, className }))}
-  {...$$restProps}
-  on:click
-  on:change
-  on:keydown
-  on:keyup
-  on:mouseenter
-  on:mouseleave
->
-  <slot />
-</svelte:element>
+<script lang="ts">
+  import type { VariantProps } from 'class-variance-authority';
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+  import { buttonVariants } from '.';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let href: HTMLAnchorAttributes['href'] = undefined;
+  export let type: HTMLButtonAttributes['type'] = undefined;
+  export let variant: VariantProps<typeof buttonVariants>['variant'] = 'default';
+  export let size: VariantProps<typeof buttonVariants>['size'] = 'default';
+
+  type Props = {
+    class?: string | null;
+    variant?: VariantProps<typeof buttonVariants>['variant'];
+    size?: VariantProps<typeof buttonVariants>['size'];
+  };
+
+  interface AnchorElement extends Props, HTMLAnchorAttributes {
+    href?: HTMLAnchorAttributes['href'];
+    type?: never;
+  }
+
+  interface ButtonElement extends Props, HTMLButtonAttributes {
+    type?: HTMLButtonAttributes['type'];
+    href?: never;
+  }
+
+  type $$Props = AnchorElement | ButtonElement;
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'button'}
+  type={href ? undefined : type}
+  {href}
+  class={cn(buttonVariants({ variant, size, className }))}
+  {...$$restProps}
+  on:click
+  on:change
+  on:keydown
+  on:keyup
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</svelte:element>