Monorepo for Tangled
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<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" } }, disabled: { true: { label: "cursor-not-allowed text-foreground-disabled" }, false: { label: "cursor-pointer" } } }, defaultVariants: { layout: "inline" } });
interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "checked" | "children"> { checked?: boolean; disabled?: boolean; layout?: "inline" | "block"; class?: string; children?: Snippet; }
let { checked = $bindable(false), disabled = false, layout = "inline", class: className, children, ...rest }: Props = $props();
const classes = $derived(toggle({ layout, 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>