Checkbox

1import type { ValidComponent } from "solid-js"
2import { Match, splitProps, Switch } from "solid-js"
3 
4import * as CheckboxPrimitive from "@kobalte/core/checkbox"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9type CheckboxRootProps<T extends ValidComponent = "div"> =
10  CheckboxPrimitive.CheckboxRootProps<T> & { class?: string | undefined }
11 
12const Checkbox = <T extends ValidComponent = "div">(
13  props: PolymorphicProps<T, CheckboxRootProps<T>>
14) => {
15  const [local, others] = splitProps(props as CheckboxRootProps, ["class"])
16  return (
17    <CheckboxPrimitive.Root
18      class={cn("items-top group relative flex space-x-2", local.class)}
19      {...others}
20    >
21      <CheckboxPrimitive.Input class="peer" />
22      <CheckboxPrimitive.Control class="size-4 shrink-0 rounded-sm border border-primary ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 data-[checked]:border-none data-[indeterminate]:border-none data-[checked]:bg-primary data-[indeterminate]:bg-primary data-[checked]:text-primary-foreground data-[indeterminate]:text-primary-foreground">
23        <CheckboxPrimitive.Indicator>
24          <Switch>
25            <Match when={!others.indeterminate}>
26              <svg
27                xmlns="http://www.w3.org/2000/svg"
28                viewBox="0 0 24 24"
29                fill="none"
30                stroke="currentColor"
31                stroke-width="2"
32                stroke-linecap="round"
33                stroke-linejoin="round"
34                class="size-4"
35              >
36                <path d="M5 12l5 5l10 -10" />
37              </svg>
38            </Match>
39            <Match when={others.indeterminate}>
40              <svg
41                xmlns="http://www.w3.org/2000/svg"
42                viewBox="0 0 24 24"
43                fill="none"
44                stroke="currentColor"
45                stroke-width="2"
46                stroke-linecap="round"
47                stroke-linejoin="round"
48                class="size-4"
49              >
50                <path d="M5 12l14 0" />
51              </svg>
52            </Match>
53          </Switch>
54        </CheckboxPrimitive.Indicator>
55      </CheckboxPrimitive.Control>
56    </CheckboxPrimitive.Root>
57  )
58}
59 
60export { Checkbox }