Switch

1import { Switch as KobalteSwitch } from "@kobalte/core/switch";
2import type { Component, ComponentProps } from "solid-js";
3import { splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6export type SwitchProps = ComponentProps<typeof KobalteSwitch> & {
7  label?: string;
8  class?: string;
9};
10 
11export const Switch: Component<SwitchProps> = (props) => {
12  const [local, rest] = splitProps(props, ["class", "label"]);
13 
14  return (
15    <KobalteSwitch class={cn("flex items-center gap-2", local.class)} {...rest}>
16      <KobalteSwitch.Input class="sr-only" />
17      <KobalteSwitch.Control
18        class={cn(
19          "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
20          "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
21          "disabled:cursor-not-allowed disabled:opacity-50",
22          "bg-input data-[checked]:bg-primary",
23        )}
24      >
25        <KobalteSwitch.Thumb
26          class={cn(
27            "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
28            "translate-x-0 data-[checked]:translate-x-5",
29          )}
30        />
31      </KobalteSwitch.Control>
32      {local.label && (
33        <KobalteSwitch.Label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
34          {local.label}
35        </KobalteSwitch.Label>
36      )}
37    </KobalteSwitch>
38  );
39};