30 lines
1.0 KiB
Svelte
30 lines
1.0 KiB
Svelte
<script>
|
|
let { checked = $bindable(false), label = "", description = "" } = $props();
|
|
</script>
|
|
|
|
<div class="flex items-start gap-3 py-2.5">
|
|
<button
|
|
class="relative mt-0.5 w-[38px] min-w-[38px] h-[22px] rounded-full flex-shrink-0
|
|
{checked ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-bg-elevated'}
|
|
active:scale-95"
|
|
style="transition-duration: var(--duration-ui)"
|
|
onclick={() => checked = !checked}
|
|
role="switch"
|
|
aria-checked={checked}
|
|
aria-label={label}
|
|
>
|
|
<span
|
|
class="absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm
|
|
ease-[cubic-bezier(0.34,1.56,0.64,1)]
|
|
{checked ? 'translate-x-[16px]' : 'translate-x-0'}"
|
|
style="transition: transform var(--duration-ui) cubic-bezier(0.34, 1.56, 0.64, 1)"
|
|
></span>
|
|
</button>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-[13px] text-text leading-tight">{label}</p>
|
|
{#if description}
|
|
<p class="text-[11px] text-text-tertiary mt-0.5 leading-snug">{description}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|