alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import type { Snippet } from "svelte";
3 import type { HTMLInputAttributes } from "svelte/elements";
4
5 interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "value" | "children"> {
6 value: string;
7 group?: string;
8 disabled?: boolean;
9 class?: string;
10 children?: Snippet;
11 }
12
13 let {
14 value,
15 group = $bindable(undefined),
16 disabled = false,
17 class: className,
18 children,
19 ...rest
20 }: Props = $props();
21
22 const labelClasses = $derived(
23 `inline-flex items-center gap-2 cursor-pointer ${disabled ? "cursor-not-allowed text-foreground-disabled" : ""} ${className ?? ""}`
24 );
25</script>
26
27<label class={labelClasses}>
28 <span class="relative inline-flex size-4 shrink-0">
29 <input
30 type="radio"
31 {value}
32 bind:group
33 {disabled}
34 class="peer size-4 shrink-0 appearance-none rounded-full border border-border-strong bg-background-default transition-colors duration-150 hover:bg-background-subtle checked:border-foreground-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
35 {...rest}
36 />
37 <span
38 class="pointer-events-none absolute inset-0 m-auto hidden size-2 rounded-full bg-foreground-default peer-checked:block peer-disabled:opacity-50"
39 aria-hidden="true"
40 ></span>
41 </span>
42 {#if children}
43 <span>{@render children()}</span>
44 {/if}
45</label>