create-tauri-ui 0.3.1 → 0.3.3

package/templates/sveltekit/src/lib/components/ui/sheet/SheetOverlay.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-  import { Dialog as SheetPrimitive } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<SheetPrimitive.Overlay
-  class={cn(
-    'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
-    className
-  )}
-  {...$$restProps}
-/>
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<SheetPrimitive.Overlay
+  class={cn(
+    'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
+    className
+  )}
+  {...$$restProps}
+/>

package/templates/sveltekit/src/lib/components/ui/sheet/SheetPortal.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-  import type { VariantProps } from 'class-variance-authority';
-  import { cva } from 'class-variance-authority';
-  import { Dialog as SheetPrimitive } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  const portalVariants = cva('fixed inset-0 z-50 flex', {
-    variants: {
-      position: {
-        top: 'items-start',
-        bottom: 'items-end',
-        left: 'justify-start',
-        right: 'justify-end'
-      }
-    },
-    defaultVariants: { position: 'right' }
-  });
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-  export let position: VariantProps<typeof portalVariants>['position'] = 'right';
-</script>
-
-<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
-  <div class={portalVariants({ position })}>
-    <slot />
-  </div>
-</SheetPrimitive.Portal>
+<script lang="ts">
+  import type { VariantProps } from 'class-variance-authority';
+  import { cva } from 'class-variance-authority';
+  import { Dialog as SheetPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  const portalVariants = cva('fixed inset-0 z-50 flex', {
+    variants: {
+      position: {
+        top: 'items-start',
+        bottom: 'items-end',
+        left: 'justify-start',
+        right: 'justify-end'
+      }
+    },
+    defaultVariants: { position: 'right' }
+  });
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let position: VariantProps<typeof portalVariants>['position'] = 'right';
+</script>
+
+<SheetPrimitive.Portal class={cn(className)} {...$$restProps}>
+  <div class={portalVariants({ position })}>
+    <slot />
+  </div>
+</SheetPrimitive.Portal>

package/templates/sveltekit/src/lib/components/ui/sheet/SheetTitle.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-  import { Dialog as SheetPrimitive } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<SheetPrimitive.Title
-  class={cn('text-lg font-semibold text-foreground', className)}
-  {...$$restProps}
->
-  <slot />
-</SheetPrimitive.Title>
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<SheetPrimitive.Title
+  class={cn('text-lg font-semibold text-foreground', className)}
+  {...$$restProps}
+>
+  <slot />
+</SheetPrimitive.Title>

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

@@ -1,102 +1,102 @@
-import { cva } from 'class-variance-authority';
-import { Dialog as SheetPrimitive } from 'radix-svelte';
-
-export { default as SheetContent } from './SheetContent.svelte';
-export { default as SheetDescription } from './SheetDescription.svelte';
-export { default as SheetFooter } from './SheetFooter.svelte';
-export { default as SheetHeader } from './SheetHeader.svelte';
-export { default as SheetOverlay } from './SheetOverlay.svelte';
-export { default as SheetPortal } from './SheetPortal.svelte';
-export { default as SheetTitle } from './SheetTitle.svelte';
-
-export const Sheet = SheetPrimitive.Root;
-export const SheetTrigger = SheetPrimitive.Trigger;
-export const SheetClose = SheetPrimitive.Close;
-
-export const sheetVariants = cva(
-  'fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border',
-  {
-    variants: {
-      position: {
-        top: 'animate-in slide-in-from-top w-full duration-300',
-        bottom: 'animate-in slide-in-from-bottom w-full duration-300',
-        left: 'animate-in slide-in-from-left h-full duration-300',
-        right: 'animate-in slide-in-from-right h-full duration-300'
-      },
-      size: {
-        content: '',
-        default: '',
-        sm: '',
-        lg: '',
-        xl: '',
-        full: ''
-      }
-    },
-    compoundVariants: [
-      {
-        position: ['top', 'bottom'],
-        size: 'content',
-        class: 'max-h-screen'
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'default',
-        class: 'h-1/3'
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'sm',
-        class: 'h-1/4'
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'lg',
-        class: 'h-1/2'
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'xl',
-        class: 'h-5/6'
-      },
-      {
-        position: ['top', 'bottom'],
-        size: 'full',
-        class: 'h-screen'
-      },
-      {
-        position: ['right', 'left'],
-        size: 'content',
-        class: 'max-w-screen'
-      },
-      {
-        position: ['right', 'left'],
-        size: 'default',
-        class: 'w-1/3'
-      },
-      {
-        position: ['right', 'left'],
-        size: 'sm',
-        class: 'w-1/4'
-      },
-      {
-        position: ['right', 'left'],
-        size: 'lg',
-        class: 'w-1/2'
-      },
-      {
-        position: ['right', 'left'],
-        size: 'xl',
-        class: 'w-5/6'
-      },
-      {
-        position: ['right', 'left'],
-        size: 'full',
-        class: 'w-screen'
-      }
-    ],
-    defaultVariants: {
-      position: 'right',
-      size: 'default'
-    }
-  }
-);
+import { cva } from 'class-variance-authority';
+import { Dialog as SheetPrimitive } from 'radix-svelte';
+
+export { default as SheetContent } from './SheetContent.svelte';
+export { default as SheetDescription } from './SheetDescription.svelte';
+export { default as SheetFooter } from './SheetFooter.svelte';
+export { default as SheetHeader } from './SheetHeader.svelte';
+export { default as SheetOverlay } from './SheetOverlay.svelte';
+export { default as SheetPortal } from './SheetPortal.svelte';
+export { default as SheetTitle } from './SheetTitle.svelte';
+
+export const Sheet = SheetPrimitive.Root;
+export const SheetTrigger = SheetPrimitive.Trigger;
+export const SheetClose = SheetPrimitive.Close;
+
+export const sheetVariants = cva(
+  'fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border',
+  {
+    variants: {
+      position: {
+        top: 'animate-in slide-in-from-top w-full duration-300',
+        bottom: 'animate-in slide-in-from-bottom w-full duration-300',
+        left: 'animate-in slide-in-from-left h-full duration-300',
+        right: 'animate-in slide-in-from-right h-full duration-300'
+      },
+      size: {
+        content: '',
+        default: '',
+        sm: '',
+        lg: '',
+        xl: '',
+        full: ''
+      }
+    },
+    compoundVariants: [
+      {
+        position: ['top', 'bottom'],
+        size: 'content',
+        class: 'max-h-screen'
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'default',
+        class: 'h-1/3'
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'sm',
+        class: 'h-1/4'
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'lg',
+        class: 'h-1/2'
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'xl',
+        class: 'h-5/6'
+      },
+      {
+        position: ['top', 'bottom'],
+        size: 'full',
+        class: 'h-screen'
+      },
+      {
+        position: ['right', 'left'],
+        size: 'content',
+        class: 'max-w-screen'
+      },
+      {
+        position: ['right', 'left'],
+        size: 'default',
+        class: 'w-1/3'
+      },
+      {
+        position: ['right', 'left'],
+        size: 'sm',
+        class: 'w-1/4'
+      },
+      {
+        position: ['right', 'left'],
+        size: 'lg',
+        class: 'w-1/2'
+      },
+      {
+        position: ['right', 'left'],
+        size: 'xl',
+        class: 'w-5/6'
+      },
+      {
+        position: ['right', 'left'],
+        size: 'full',
+        class: 'w-screen'
+      }
+    ],
+    defaultVariants: {
+      position: 'right',
+      size: 'default'
+    }
+  }
+);

package/templates/sveltekit/src/lib/components/ui/skeleton/Skeleton.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<div class={cn('animate-pulse rounded-md bg-muted', className)} {...$$restProps} />
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('animate-pulse rounded-md bg-muted', className)} {...$$restProps} />

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

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

package/templates/sveltekit/src/lib/components/ui/slider/Slider.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-  import type { SliderRootProps } from 'radix-svelte';
-  import { Slider as SliderPrimitive } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-  export let value: SliderRootProps['value'] = 0;
-</script>
-
-<SliderPrimitive.Root
-  bind:value
-  class={cn('relative flex w-full touch-none select-none items-center', className)}
-  {...$$restProps}
->
-  <SliderPrimitive.Track class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-    <SliderPrimitive.Range class="absolute h-full bg-primary" />
-  </SliderPrimitive.Track>
-  <SliderPrimitive.Thumb
-    class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-  />
-</SliderPrimitive.Root>
+<script lang="ts">
+  import type { SliderRootProps } from 'radix-svelte';
+  import { Slider as SliderPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let value: SliderRootProps['value'] = 0;
+</script>
+
+<SliderPrimitive.Root
+  bind:value
+  class={cn('relative flex w-full touch-none select-none items-center', className)}
+  {...$$restProps}
+>
+  <SliderPrimitive.Track class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+    <SliderPrimitive.Range class="absolute h-full bg-primary" />
+  </SliderPrimitive.Track>
+  <SliderPrimitive.Thumb
+    class="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+  />
+</SliderPrimitive.Root>

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

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

package/templates/sveltekit/src/lib/components/ui/switch/Switch.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-  import type { SwitchRootProps } from 'radix-svelte';
-  import { Switch } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-  export let rootChecked: SwitchRootProps['checked'] = undefined;
-  export let rootRequired: SwitchRootProps['required'] = undefined;
-  export let rootDisabled: SwitchRootProps['disabled'] = undefined;
-  export let rootName: SwitchRootProps['name'] = undefined;
-  export let rootValue: SwitchRootProps['value'] = undefined;
-</script>
-
-<Switch.Root
-  class={cn(
-    'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
-    className
-  )}
-  {...$$restProps}
-  bind:checked={rootChecked}
-  bind:required={rootRequired}
-  bind:disabled={rootDisabled}
-  bind:name={rootName}
-  bind:value={rootValue}
->
-  <Switch.Thumb
-    class={cn(
-      'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
-    )}
-  />
-</Switch.Root>
+<script lang="ts">
+  import type { SwitchRootProps } from 'radix-svelte';
+  import { Switch } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let rootChecked: SwitchRootProps['checked'] = undefined;
+  export let rootRequired: SwitchRootProps['required'] = undefined;
+  export let rootDisabled: SwitchRootProps['disabled'] = undefined;
+  export let rootName: SwitchRootProps['name'] = undefined;
+  export let rootValue: SwitchRootProps['value'] = undefined;
+</script>
+
+<Switch.Root
+  class={cn(
+    'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...$$restProps}
+  bind:checked={rootChecked}
+  bind:required={rootRequired}
+  bind:disabled={rootDisabled}
+  bind:name={rootName}
+  bind:value={rootValue}
+>
+  <Switch.Thumb
+    class={cn(
+      'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+    )}
+  />
+</Switch.Root>

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

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

package/templates/sveltekit/src/lib/components/ui/table/Table.svelte

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

package/templates/sveltekit/src/lib/components/ui/table/TableBody.svelte

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

package/templates/sveltekit/src/lib/components/ui/table/TableCaption.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<caption class={cn('mt-4 text-sm text-muted-foreground', className)} {...$$restProps}>
-  <slot />
-</caption>
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<caption class={cn('mt-4 text-sm text-muted-foreground', className)} {...$$restProps}>
+  <slot />
+</caption>

package/templates/sveltekit/src/lib/components/ui/table/TableCell.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<td class={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...$$restProps}>
-  <slot />
-</td>
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<td class={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)} {...$$restProps}>
+  <slot />
+</td>

package/templates/sveltekit/src/lib/components/ui/table/TableFooter.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<tfoot class={cn('bg-primary font-medium text-primary-foreground', className)} {...$$restProps}>
-  <slot />
-</tfoot>
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<tfoot class={cn('bg-primary font-medium text-primary-foreground', className)} {...$$restProps}>
+  <slot />
+</tfoot>

package/templates/sveltekit/src/lib/components/ui/table/TableHead.svelte

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<th
-  class={cn(
-    'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
-    className
-  )}
-  {...$$restProps}
->
-  <slot />
-</th>
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<th
+  class={cn(
+    'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+</th>

package/templates/sveltekit/src/lib/components/ui/table/TableHeader.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<thead class={cn('[&_tr]:border-b', className)} {...$$restProps}>
-  <slot />
-</thead>
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<thead class={cn('[&_tr]:border-b', className)} {...$$restProps}>
+  <slot />
+</thead>