create-tauri-ui 0.1.2 → 0.1.4

package/templates/sveltekit/src/lib/components/ui/radio-group/RadioGroupItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { RadioGroupItemProps } from 'radix-svelte';
+  import { Circle } from 'lucide-svelte';
+  import { RadioGroup as RadioGroupPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let value: RadioGroupItemProps['value'] = '';
+</script>
+
+<RadioGroupPrimitive.Item
+  {value}
+  class={cn(
+    'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...$$restProps}
+>
+  <RadioGroupPrimitive.Indicator class="flex items-center justify-center">
+    <Circle class="h-2.5 w-2.5 fill-current text-current" />
+  </RadioGroupPrimitive.Indicator>
+</RadioGroupPrimitive.Item>

package/templates/sveltekit/src/lib/components/ui/radio-group/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as RadioGroupItem } from './RadioGroupItem.svelte';

package/templates/sveltekit/src/lib/components/ui/select/SelectContent.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<SelectPrimitive.Portal>
+  <SelectPrimitive.Content
+    class={cn(
+      'relative z-50 min-w-[8rem] translate-y-1 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',
+      className
+    )}
+    {...$$restProps}
+  >
+    <SelectPrimitive.Viewport
+      class={cn(
+        'p-1',
+        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+      )}
+    >
+      <slot />
+    </SelectPrimitive.Viewport>
+  </SelectPrimitive.Content>
+</SelectPrimitive.Portal>

package/templates/sveltekit/src/lib/components/ui/select/SelectItem.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { SelectItemProps } from 'radix-svelte';
+  import { Check } from 'lucide-svelte';
+  import { Select as SelectPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let value: SelectItemProps['value'] = '';
+</script>
+
+<SelectPrimitive.Item
+  class={cn(
+    'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground',
+    className
+  )}
+  {value}
+  {...$$restProps}
+>
+  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <SelectPrimitive.ItemIndicator>
+      <Check class="h-4 w-4" />
+    </SelectPrimitive.ItemIndicator>
+  </span>
+
+  <SelectPrimitive.ItemText>
+    <slot />
+  </SelectPrimitive.ItemText>
+</SelectPrimitive.Item>

package/templates/sveltekit/src/lib/components/ui/select/SelectLabel.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<SelectPrimitive.Label
+  class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+  {...$$restProps}
+>
+  <slot />
+</SelectPrimitive.Label>

package/templates/sveltekit/src/lib/components/ui/select/SelectSeparator.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<SelectPrimitive.Separator class={cn('-mx-1 my-1 h-px bg-muted', className)} {...$$restProps} />

package/templates/sveltekit/src/lib/components/ui/select/SelectTrigger.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { ChevronDown } from 'lucide-svelte';
+  import { Select as SelectPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<SelectPrimitive.Trigger
+  class={cn(
+    'flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...$$restProps}
+>
+  <slot />
+  <SelectPrimitive.Icon>
+    <ChevronDown class="h-4 w-4 opacity-50" />
+  </SelectPrimitive.Icon>
+</SelectPrimitive.Trigger>

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

@@ -0,0 +1,10 @@
+import { Select as SelectPrimitive } from 'radix-svelte';
+
+export { default as SelectContent } from './SelectContent.svelte';
+export { default as SelectLabel } from './SelectItem.svelte';
+export { default as SelectSeparator } from './SelectSeparator.svelte';
+export { default as SelectTrigger } from './SelectTrigger.svelte';
+
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;

package/templates/sveltekit/src/lib/components/ui/separator/Separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { SeparatorRootProps } from 'radix-svelte';
+  import { Separator } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+
+  export let orientation: SeparatorRootProps['orientation'] = 'horizontal';
+  export let decorative: SeparatorRootProps['decorative'] = true;
+</script>
+
+<Separator.Root
+  {orientation}
+  {decorative}
+  class={cn(
+    'shrink-0 bg-border',
+    orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+    className
+  )}
+  {...$$restProps}
+/>

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

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.svelte';

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { VariantProps } from 'class-variance-authority';
+  import { X } from 'lucide-svelte';
+  import { Dialog as SheetPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+  import { sheetVariants } from '.';
+  import SheetOverlay from './SheetOverlay.svelte';
+  import SheetPortal from './SheetPortal.svelte';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let position: VariantProps<typeof sheetVariants>['position'] = 'right';
+  export let size: VariantProps<typeof sheetVariants>['size'] = 'default';
+</script>
+
+<SheetPortal {position}>
+  <SheetOverlay />
+  <SheetPrimitive.Content class={cn(sheetVariants({ position, size }), className)} {...$$restProps}>
+    <slot />
+    <SheetPrimitive.Close
+      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+    >
+      <X class="h-4 w-4" />
+      <span class="sr-only">Close</span>
+    </SheetPrimitive.Close>
+  </SheetPrimitive.Content>
+</SheetPortal>

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

@@ -0,0 +1,11 @@
+<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.Description class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
+  <slot />
+</SheetPrimitive.Description>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

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

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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'
+    }
+  }
+);

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

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

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

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

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

@@ -0,0 +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>

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

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

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

@@ -0,0 +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>

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

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

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

@@ -0,0 +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>

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

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

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

@@ -0,0 +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>

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

@@ -0,0 +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>