checkbox

1import * as CheckboxPrimitive from "@kobalte/core/checkbox";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import IconCheck from "~icons/lucide/check";
6 
7import type { ValidComponent } from "solid-js";
8import { splitProps } from "solid-js";
9 
10type CheckboxRootProps<T extends ValidComponent = "div"> =
11  & CheckboxPrimitive.CheckboxRootProps<T>
12  & { class?: string | undefined };
13 
14const Checkbox = <T extends ValidComponent = "div">(
15  props: PolymorphicProps<T, CheckboxRootProps<T>>,
16) => {
17  const [local, others] = splitProps(props as CheckboxRootProps, ["class"]);
18  return (
19    <CheckboxPrimitive.Root
20      data-slot="checkbox"
21      class="peer"
22      {...others}
23    >
24      <CheckboxPrimitive.Input class="peer" />
25      <CheckboxPrimitive.Control
26        class={cn(
27          "border-input dark:bg-input/30 data-[checked]:bg-primary data-[checked]:text-primary-foreground dark:data-[checked]:bg-primary data-[checked]:border-primary data-invalid:data-[checked]:border-primary data-invalid:border-destructive dark:data-invalid:border-destructive/50 peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 data-invalid:ring-destructive/20 dark:data-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 peer-focus-visible:ring-3 data-invalid:ring-3 relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
28          local.class,
29        )}
30      >
31        <CheckboxPrimitive.Indicator
32          data-slot="checkbox-indicator"
33          class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
34        >
35          <IconCheck
36          />
37        </CheckboxPrimitive.Indicator>
38      </CheckboxPrimitive.Control>
39    </CheckboxPrimitive.Root>
40  );
41};
42 
43export { Checkbox };