create-tauri-ui 0.3.2 → 0.3.3

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>

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

@@ -1,16 +1,16 @@
-<script lang="ts">
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<tr
-  class={cn(
-    'border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50',
-    className
-  )}
-  {...$$restProps}
->
-  <slot />
-</tr>
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<tr
+  class={cn(
+    'border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+</tr>

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

@@ -1,8 +1,8 @@
-export { default as Table } from './Table.svelte';
-export { default as TableBody } from './TableBody.svelte';
-export { default as TableCaption } from './TableCaption.svelte';
-export { default as TableCell } from './TableCell.svelte';
-export { default as TableFooter } from './TableFooter.svelte';
-export { default as TableHead } from './TableHead.svelte';
-export { default as TableHeader } from './TableHeader.svelte';
-export { default as TableRow } from './TableRow.svelte';
+export { default as Table } from './Table.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableCaption } from './TableCaption.svelte';
+export { default as TableCell } from './TableCell.svelte';
+export { default as TableFooter } from './TableFooter.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableRow } from './TableRow.svelte';

package/templates/sveltekit/src/lib/components/ui/tabs/TabsContent.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-  import type { TabsContentProps } from 'radix-svelte';
-  import { Tabs as TabsPrimitive } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-  export let value: TabsContentProps['value'];
-</script>
-
-<TabsPrimitive.Content
-  class={cn(
-    'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-    className
-  )}
-  {value}
-  {...$$restProps}
->
-  <slot />
-</TabsPrimitive.Content>
+<script lang="ts">
+  import type { TabsContentProps } from 'radix-svelte';
+  import { Tabs as TabsPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let value: TabsContentProps['value'];
+</script>
+
+<TabsPrimitive.Content
+  class={cn(
+    'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+    className
+  )}
+  {value}
+  {...$$restProps}
+>
+  <slot />
+</TabsPrimitive.Content>

package/templates/sveltekit/src/lib/components/ui/tabs/TabsList.svelte

@@ -1,17 +1,17 @@
-<script lang="ts">
-  import { Tabs as TabsPrimitive } from 'radix-svelte';
-  import { cn } from '$lib/utils';
-
-  let className: string | undefined | null = undefined;
-  export { className as class };
-</script>
-
-<TabsPrimitive.List
-  class={cn(
-    'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
-    className
-  )}
-  {...$$restProps}
->
-  <slot />
-</TabsPrimitive.List>
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<TabsPrimitive.List
+  class={cn(
+    'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+</TabsPrimitive.List>