Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081<script lang="ts"> import type { Snippet } from "svelte"; import type { HTMLInputAttributes } from "svelte/elements"; import { tv } from "tailwind-variants";
const toggle = tv({ slots: { label: "items-center gap-xs", input: [ "peer absolute inset-0 size-full cursor-pointer appearance-none rounded-full bg-background-muted", "transition-colors duration-150", "checked:bg-foreground-default", "enabled:hover:bg-background-strong checked:enabled:hover:bg-foreground-muted", "focus-visible:ring-2 focus-visible:ring-border-strong focus-visible:outline-none", "disabled:cursor-not-allowed disabled:bg-background-inset checked:disabled:bg-foreground-disabled" ], thumb: [ "pointer-events-none absolute top-[2px] left-[2px] size-sm rounded-full bg-background-default", "transition-transform duration-150 peer-checked:translate-x-[16px]" ], text: "" }, variants: { layout: { inline: { label: "inline-flex", text: "whitespace-nowrap" }, block: { label: "flex w-full", text: "min-w-0 flex-1" } }, size: { small: { label: "min-h-7 typography-paragraph-small" }, regular: { label: "" } }, disabled: { true: { label: "cursor-not-allowed text-foreground-disabled" }, false: { label: "cursor-pointer" } } }, defaultVariants: { layout: "inline", size: "regular" } });
interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "checked" | "children"> { checked?: boolean; disabled?: boolean; layout?: "inline" | "block"; size?: "small" | "regular"; class?: string; children?: Snippet; }
let { checked = $bindable(false), disabled = false, layout = "inline", size = "regular", class: className, children, ...rest }: Props = $props();
const classes = $derived(toggle({ layout, size, disabled }));</script>
<label class={classes.label({ class: className })}> <span class="relative inline-flex h-md w-2xl shrink-0"> <input type="checkbox" role="switch" bind:checked {disabled} class={classes.input()} {...rest} /> <span class={classes.thumb()} aria-hidden="true"></span> </span> {#if children} <span class={classes.text()}>{@render children()}</span> {/if}</label>