bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 interface Props {
3 checked?: boolean
4 labelClass?: string
5 class?: string
6 children?: import('svelte').Snippet
7 description?: import('svelte').Snippet
8 }
9
10 let {
11 checked = $bindable(),
12 labelClass = '',
13 class: clazz = '',
14 children,
15 description,
16 }: Props = $props()
17</script>
18
19<label
20 class="font-normal cursor-pointer flex flex-row items-center gap-4 group {clazz}"
21>
22 <div
23 class="w-11 h-6 rounded-full relative z-[inherit] cursor-pointer flex flex-row transition-colors shadow-xs
24{checked
25 ? 'bg-primary-900 dark:bg-primary-100'
26 : 'bg-slate-200 dark:bg-zinc-800'}
27 p-0.5 shrink-0"
28 >
29 <input
30 bind:checked
31 type="checkbox"
32 class="peer appearance-none absolute top-0 left-0 w-full h-full cursor-pointer z-10"
33 />
34 <div
35 class="box-border w-5 h-full bg-white dark:peer-checked:bg-black rounded-full shadow-xs
36 group-active:w-5.5 transition peer-checked:translate-x-5 peer-checked:group-active:translate-x-4.5
37 peer-checked:rtl:-translate-x-5 peer-checked:group-active:rtl:-translate-x-4"
38 ></div>
39 </div>
40 <div class="flex flex-col {labelClass}">
41 {@render children?.()}
42 {#if description}
43 <span class="font-normal text-sm text-slate-700 dark:text-zinc-300">
44 {@render description?.()}
45 </span>
46 {/if}
47 </div>
48</label>
49
50<style>
51 .transition {
52 transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
53 }
54</style>