create-tauri-ui 0.1.3 → 0.1.5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority';
+
+export { default as Button } from './Button.svelte';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'underline-offset-4 hover:underline text-primary'
+      },
+      size: {
+        default: 'h-10 py-2 px-4',
+        sm: 'h-9 px-3 rounded-md',
+        lg: 'h-11 px-8 rounded-md'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+);

package/templates/sveltekit/src/lib/components/ui/card/Card.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<div
+  class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+  {...$$restProps}
+  on:click
+  on:focusin
+  on:focusout
+  on:mouseenter
+  on:mouseleave
+>
+  <slot />
+</div>

package/templates/sveltekit/src/lib/components/ui/card/CardContent.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('p-6 pt-0', className)} {...$$restProps}>
+  <slot />
+</div>

package/templates/sveltekit/src/lib/components/ui/card/CardDescription.svelte

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

package/templates/sveltekit/src/lib/components/ui/card/CardFooter.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 items-center p-6 pt-0', className)} {...$$restProps}>
+  <slot />
+</div>

package/templates/sveltekit/src/lib/components/ui/card/CardHeader.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-1.5 p-6', className)} {...$$restProps}>
+  <slot />
+</div>

package/templates/sveltekit/src/lib/components/ui/card/CardTitle.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+
+  export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';
+</script>
+
+<svelte:element
+  this={tag}
+  class={cn('text-lg font-semibold leading-none tracking-tight', className)}
+  {...$$restProps}
+>
+  <slot />
+</svelte:element>

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

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.svelte';
+export { default as CardContent } from './CardContent.svelte';
+export { default as CardDescription } from './CardDescription.svelte';
+export { default as CardFooter } from './CardFooter.svelte';
+export { default as CardHeader } from './CardHeader.svelte';
+export { default as CardTitle } from './CardTitle.svelte';

package/templates/sveltekit/src/lib/components/ui/checkbox/Checkbox.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { CheckboxRootProps } from 'radix-svelte';
+  import { Check } from 'lucide-svelte';
+  import { Checkbox as CheckboxPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let checked: CheckboxRootProps['checked'] = undefined;
+</script>
+
+<CheckboxPrimitive.Root
+  class={cn(
+    'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  bind:checked
+  {...$$restProps}
+>
+  <CheckboxPrimitive.Indicator class={cn('flex items-center justify-center text-current')}>
+    <Check class="h-4 w-4" />
+  </CheckboxPrimitive.Indicator>
+</CheckboxPrimitive.Root>

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

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

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

@@ -0,0 +1,7 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-svelte';
+
+export const Collapsible = CollapsiblePrimitive.Root;
+
+export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+export const CollapsibleContent = CollapsiblePrimitive.Content;

package/templates/sveltekit/src/lib/components/ui/dialog/DialogContent.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { X } from 'lucide-svelte';
+  import { Dialog as DialogPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+  import DialogOverlay from './DialogOverlay.svelte';
+  import DialogPortal from './DialogPortal.svelte';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<DialogPortal>
+  <DialogOverlay />
+  <DialogPrimitive.Content
+    class={cn(
+      'fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
+      className
+    )}
+    {...$$restProps}
+  >
+    <slot />
+    <DialogPrimitive.Close
+      class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+    >
+      <X className="h-4 w-4" />
+      <span class="sr-only">Close</span>
+    </DialogPrimitive.Close>
+  </DialogPrimitive.Content>
+</DialogPortal>

package/templates/sveltekit/src/lib/components/ui/dialog/DialogDescription.svelte

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

package/templates/sveltekit/src/lib/components/ui/dialog/DialogFooter.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/dialog/DialogHeader.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-1.5 text-center sm:text-left', className)} {...$$restProps}>
+  <slot />
+</div>

package/templates/sveltekit/src/lib/components/ui/dialog/DialogOverlay.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<DialogPrimitive.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/dialog/DialogPortal.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<DialogPrimitive.Portal class={cn(className)} {...$$restProps}>
+  <div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+    <slot />
+  </div>
+</DialogPrimitive.Portal>

package/templates/sveltekit/src/lib/components/ui/dialog/DialogTitle.svelte

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

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

@@ -0,0 +1,12 @@
+import { Dialog as DialogPrimitive } from 'radix-svelte';
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+
+export { default as DialogContent } from './DialogContent.svelte';
+export { default as DialogDescription } from './DialogDescription.svelte';
+export { default as DialogFooter } from './DialogFooter.svelte';
+export { default as DialogHeader } from './DialogHeader.svelte';
+export { default as DialogOverlay } from './DialogOverlay.svelte';
+export { default as DialogPortal } from './DialogPortal.svelte';
+export { default as DialogTitle } from './DialogTitle.svelte';

package/templates/sveltekit/src/lib/components/ui/hover-card/HoverCardContent.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HoverCardContentProps } from 'radix-svelte';
+  import { HoverCard as HoverCardPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let align: HoverCardContentProps['align'] = undefined;
+  export let sideOffset: HoverCardContentProps['sideOffset'] = undefined;
+</script>
+
+<HoverCardPrimitive.Portal>
+  <HoverCardPrimitive.Content
+    {align}
+    {sideOffset}
+    class={cn(
+      'z-50 mt-3 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none animate-in zoom-in-90',
+      className
+    )}
+    {...$$restProps}
+  >
+    <slot />
+  </HoverCardPrimitive.Content>
+</HoverCardPrimitive.Portal>

package/templates/sveltekit/src/lib/components/ui/hover-card/index.ts

@@ -0,0 +1,6 @@
+import { HoverCard as HoverCardPrimitive } from 'radix-svelte';
+
+export { default as HoverCardContent } from './HoverCardContent.svelte';
+export const HoverCard = HoverCardPrimitive.Root;
+export const HoverCardTrigger = HoverCardPrimitive.Trigger;
+export const HoverCardPortal = HoverCardPrimitive.Portal;

package/templates/sveltekit/src/lib/components/ui/input/Input.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+
+  export let value: HTMLInputAttributes['value'] = undefined;
+  export { className as class };
+</script>
+
+<input
+  class={cn(
+    'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  bind:value
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:paste
+  on:input
+  {...$$restProps}
+/>

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

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

package/templates/sveltekit/src/lib/components/ui/label/Label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cva } from 'class-variance-authority';
+  import { Label as LabelPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  const labelVariants = cva(
+    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+  );
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+</script>
+
+<LabelPrimitive.Root class={cn(labelVariants(), className)} {...$$restProps}>
+  <slot />
+</LabelPrimitive.Root>

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

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

package/templates/sveltekit/src/lib/components/ui/progress/Progress.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { ProgressRootProps } from 'radix-svelte';
+  import { Progress as ProgressPrimitive } from 'radix-svelte';
+  import { cn } from '$lib/utils';
+
+  let className: string | undefined | null = undefined;
+  export { className as class };
+  export let value: ProgressRootProps['value'] = null;
+  export let max: ProgressRootProps['max'] = 100;
+</script>
+
+<ProgressPrimitive.Root
+  class={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
+  {value}
+  {max}
+  {...$$restProps}
+>
+  <ProgressPrimitive.Indicator
+    class="h-full w-full flex-1 bg-primary transition-all"
+    style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+  />
+</ProgressPrimitive.Root>

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

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

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { RadioGroupRootProps } from 'radix-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: RadioGroupRootProps['value'] = undefined;
+</script>
+
+<RadioGroupPrimitive.Root bind:value class={cn('grid gap-2', className)} {...$$restProps}>
+  <slot />
+</RadioGroupPrimitive.Root>