forked from
cool-handle.ebil.club/meowzone
beatufitull front end for ozone modration ,, wit catpucoin and ebergarden !
checkbox
+55
+55
src/components/ui/Checkbox.svelte
+55
src/components/ui/Checkbox.svelte
···
1
+
<script lang="ts">
2
+
import { CheckIcon } from 'lucide-svelte';
3
+
import { inputAccentColor, type InputAccentColor } from '$lib/stores/ui';
4
+
import { accentClasses } from '$lib/utils/accent';
5
+
6
+
export let id: string | undefined = undefined;
7
+
export let checked = false;
8
+
export let disabled = false;
9
+
export let label = '';
10
+
export let color: InputAccentColor | null = null;
11
+
export let className = '';
12
+
13
+
$: activeColor = color ?? $inputAccentColor;
14
+
$: indicatorClass = [
15
+
'flex h-4 w-4 items-center justify-center rounded-sm border text-[10px] transition-colors',
16
+
checked
17
+
? `${accentClasses[activeColor].bg} ${accentClasses[activeColor].border} text-ctp-base`
18
+
: 'border-ctp-surface1 bg-ctp-surface1 text-transparent',
19
+
disabled
20
+
? 'opacity-60'
21
+
: checked
22
+
? 'opacity-80 group-hover:opacity-100'
23
+
: 'group-hover:border-ctp-surface2 group-hover:bg-ctp-surface2',
24
+
className
25
+
]
26
+
.filter(Boolean)
27
+
.join(' ');
28
+
</script>
29
+
30
+
<label
31
+
class={`group inline-flex items-center gap-2 ${disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'}`}
32
+
>
33
+
<input
34
+
{id}
35
+
type="checkbox"
36
+
bind:checked
37
+
{disabled}
38
+
class="peer sr-only"
39
+
on:change
40
+
on:input
41
+
on:focus
42
+
on:blur
43
+
{...$$restProps}
44
+
/>
45
+
<span
46
+
class={`${indicatorClass} peer-focus-visible:ring-2 ${accentClasses[activeColor].ring} peer-focus-visible:ring-offset-0`}
47
+
>
48
+
<CheckIcon class="h-3 w-3" />
49
+
</span>
50
+
{#if label}
51
+
<span class="text-sm font-medium text-ctp-subtext0 group-hover:text-ctp-text">{label}</span>
52
+
{:else}
53
+
<span class="text-sm font-medium text-ctp-subtext0 group-hover:text-ctp-text"><slot /></span>
54
+
{/if}
55
+
</label>