create-tauri-ui 0.3.2 → 0.3.3

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

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

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

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

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

@@ -1,7 +1,7 @@
-import { Collapsible as CollapsiblePrimitive } from 'radix-svelte';
-
-export const Collapsible = CollapsiblePrimitive.Root;
-
-export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
-
-export const CollapsibleContent = CollapsiblePrimitive.Content;
+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

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

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

@@ -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/dialog/DialogHeader.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-1.5 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-1.5 text-center sm:text-left', className)} {...$$restProps}>
+  <slot />
+</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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