Switch

1
import type { PolymorphicProps } from "@kobalte/core";
2
import type { JSX, ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as SwitchPrimitive from "@kobalte/core/switch";
6

7
import { cn } from "~/lib/utils";
8

9
const Switch = <T extends ValidComponent = "div">(
10
  props: PolymorphicProps<T, SwitchPrimitive.SwitchRootProps<T>>,
11
) => {
12
  return <SwitchPrimitive.Root data-slot="switch" {...props} />;
13
};
14

15
const SwitchDescription = <T extends ValidComponent = "div">(
16
  props: PolymorphicProps<T, SwitchPrimitive.SwitchDescriptionProps<T>>,
17
) => {
18
  return (
19
    <SwitchPrimitive.Description data-slot="switch-description" {...props} />
20
  );
21
};
22

23
const SwitchErrorMessage = <T extends ValidComponent = "div">(
24
  props: PolymorphicProps<T, SwitchPrimitive.SwitchErrorMessageProps<T>>,
25
) => {
26
  return (
27
    <SwitchPrimitive.ErrorMessage data-slot="switch-error-message" {...props} />
28
  );
29
};
30

31
type SwitchControlProps = SwitchPrimitive.SwitchControlProps & {
32
  class?: string | undefined;
33
  children?: JSX.Element;
34
};
35

36
const SwitchControl = <T extends ValidComponent = "input">(
37
  props: PolymorphicProps<T, SwitchControlProps>,
38
) => {
39
  const [local, others] = splitProps(props as SwitchControlProps, [
40
    "class",
41
    "children",
42
  ]);
43
  return (
44
    <>
45
      <SwitchPrimitive.Input
46
        data-slot="switch-input"
47
        class={cn(
48
          "[&:focus-visible+div]:ring-2 [&:focus-visible+div]:ring-ring [&:focus-visible+div]:ring-offset-2 [&:focus-visible+div]:ring-offset-background [&:focus-visible+div]:outline-none",
49
          local.class,
50
        )}
51
      />
52
      <SwitchPrimitive.Control
53
        data-slot="switch-control"
54
        class={cn(
55
          "inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-border bg-secondary-background transition-[color,background-color,box-shadow] ui-disabled:cursor-not-allowed ui-disabled:opacity-50 ui-checked:bg-primary",
56
          local.class,
57
        )}
58
        {...others}
59
      >
60
        {local.children}
61
      </SwitchPrimitive.Control>
62
    </>
63
  );
64
};
65

66
type SwitchThumbProps = SwitchPrimitive.SwitchThumbProps & {
67
  class?: string | undefined;
68
};
69

70
const SwitchThumb = <T extends ValidComponent = "div">(
71
  props: PolymorphicProps<T, SwitchThumbProps>,
72
) => {
73
  const [local, others] = splitProps(props as SwitchThumbProps, ["class"]);
74
  return (
75
    <SwitchPrimitive.Thumb
76
      data-slot="switch-thumb"
77
      class={cn(
78
        "pointer-events-none block size-4 translate-x-1 rounded-full border-2 border-border bg-white ring-0 transition-transform ui-checked:translate-x-5",
79
        local.class,
80
      )}
81
      {...others}
82
    />
83
  );
84
};
85

86
type SwitchLabelProps = SwitchPrimitive.SwitchLabelProps & {
87
  class?: string | undefined;
88
};
89

90
const SwitchLabel = <T extends ValidComponent = "label">(
91
  props: PolymorphicProps<T, SwitchLabelProps>,
92
) => {
93
  const [local, others] = splitProps(props as SwitchLabelProps, ["class"]);
94
  return (
95
    <SwitchPrimitive.Label
96
      data-slot="switch-label"
97
      class={cn(
98
        "text-sm leading-none font-medium ui-disabled:cursor-not-allowed ui-disabled:opacity-70",
99
        local.class,
100
      )}
101
      {...others}
102
    />
103
  );
104
};
105

106
export {
107
  Switch,
108
  SwitchControl,
109
  SwitchThumb,
110
  SwitchLabel,
111
  SwitchDescription,
112
  SwitchErrorMessage,
113
};