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 ${disabled ? "cursor-not-allowed text-foreground-disabled" : "cursor-pointer"} ${className ?? ""}`
24 );
25</script>
26
27<label class={labelClasses}>
28 <span class="relative inline-flex">
29 <input
30 type="radio"
31 {value}
32 bind:group
33 {disabled}
34 class="peer size-4 shrink-0 appearance-none rounded-full cursor-pointer border border-border-strong bg-background-default transition-colors duration-150 \
35 hover:bg-background-subtle \
36 checked:border-foreground-default \
37 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default \
38 disabled:cursor-not-allowed disabled:pointer-events-none disabled:border-border-disabled disabled:hover:bg-inherit"
39 {...rest}
40 />
41 <span
42 class="absolute inset-0 m-auto hidden size-2 rounded-full \
43 bg-foreground-default \
44 peer-checked:block \
45 peer-disabled:text-foreground-disabled peer-disabled:bg-foreground-disabled"
46 aria-hidden="true"
47 ></span>
48 </span>
49 {#if children}
50 <span>{@render children()}</span>
51 {/if}
52</label>