Switch

1import type { JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core"
5import * as SwitchPrimitive from "@kobalte/core/switch"
6 
7import { cn } from "~/lib/utils"
8 
9const Switch = SwitchPrimitive.Root
10const SwitchDescription = SwitchPrimitive.Description
11const SwitchErrorMessage = SwitchPrimitive.ErrorMessage
12 
13type SwitchControlProps = SwitchPrimitive.SwitchControlProps & {
14  class?: string | undefined
15  children?: JSX.Element
16}
17 
18const SwitchControl = <T extends ValidComponent = "input">(
19  props: PolymorphicProps<T, SwitchControlProps>
20) => {
21  const [local, others] = splitProps(props as SwitchControlProps, ["class", "children"])
22  return (
23    <>
24      <SwitchPrimitive.Input
25        class={cn(
26          "[&:focus-visible+div]:outline-none [&:focus-visible+div]:ring-2 [&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-2 [&:focus-visible+div]:ring-offset-background",
27          local.class
28        )}
29      />
30      <SwitchPrimitive.Control
31        class={cn(
32          "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-input transition-[color,background-color,box-shadow] data-[disabled]:cursor-not-allowed data-[checked]:bg-primary data-[disabled]:opacity-50",
33          local.class
34        )}
35        {...others}
36      >
37        {local.children}
38      </SwitchPrimitive.Control>
39    </>
40  )
41}
42 
43type SwitchThumbProps = SwitchPrimitive.SwitchThumbProps & { class?: string | undefined }
44 
45const SwitchThumb = <T extends ValidComponent = "div">(
46  props: PolymorphicProps<T, SwitchThumbProps>
47) => {
48  const [local, others] = splitProps(props as SwitchThumbProps, ["class"])
49  return (
50    <SwitchPrimitive.Thumb
51      class={cn(
52        "pointer-events-none block size-5 translate-x-0 rounded-full bg-background shadow-lg ring-0 transition-transform data-[checked]:translate-x-5",
53        local.class
54      )}
55      {...others}
56    />
57  )
58}
59 
60type SwitchLabelProps = SwitchPrimitive.SwitchLabelProps & { class?: string | undefined }
61 
62const SwitchLabel = <T extends ValidComponent = "label">(
63  props: PolymorphicProps<T, SwitchLabelProps>
64) => {
65  const [local, others] = splitProps(props as SwitchLabelProps, ["class"])
66  return (
67    <SwitchPrimitive.Label
68      class={cn(
69        "text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70",
70        local.class
71      )}
72      {...others}
73    />
74  )
75}
76 
77// … truncated