Checkbox

1import { cn } from "@/lib/utils";2import { Checkbox as CheckboxPrimitive } from "@sprawlify/solid/checkbox";3import { CheckIcon, MinusIcon } from "lucide-solid";4import { type ComponentProps, splitProps } from "solid-js";56function Checkbox(props: ComponentProps<typeof CheckboxPrimitive.Root>) {7  const [local, others] = splitProps(props, ["class", "children"]);89  return (10    <CheckboxPrimitive.Root11      data-slot="checkbox"12      class={cn(13        "group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50",14        local.class,15      )}16      {...others}17    >18      <CheckboxPrimitive.Control19        data-slot="checkbox-control"20        class="bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary"21      >22        <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" class="[&>svg]:size-3.5">23          <CheckIcon />24        </CheckboxPrimitive.Indicator>25        <CheckboxPrimitive.Indicator26          data-slot="checkbox-indicator"27          class="[&>svg]:size-3.5"28          indeterminate29        >30          <MinusIcon />31        </CheckboxPrimitive.Indicator>32      </CheckboxPrimitive.Control>33      {local.children && (34        <CheckboxPrimitive.Label35          data-slot="checkbox-label"36          class="text-sm leading-none font-medium select-none peer-disabled:opacity-50"37        >38          {local.children}39        </CheckboxPrimitive.Label>40      )}41      <CheckboxPrimitive.HiddenInput />42    </CheckboxPrimitive.Root>43  );44}4546function CheckboxRoot(props: ComponentProps<typeof CheckboxPrimitive.Root>) {47  const [local, others] = splitProps(props, ["class"]);4849  return (50    <CheckboxPrimitive.Root51      data-slot="checkbox"52      class={cn(53        "group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50",54        local.class,55      )}56      {...others}57    />58  );59}6061function CheckboxControl(props: ComponentProps<typeof CheckboxPrimitive.Control>) {62  const [local, others] = splitProps(props, ["class"]);6364  return (65    <CheckboxPrimitive.Control66      data-slot="checkbox-control"67      class={cn(68        "bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",69        local.class,70      )}71      {...others}72    />73  );74}7576function CheckboxIndicator(77  props: ComponentProps<typeof CheckboxPrimitive.Indicator> & { children?: any },78) {79  const [local, others] = splitProps(props, ["class", "children"]);8081  return (82    <CheckboxPrimitive.Indicator83      data-slot="checkbox-indicator"84      class={cn("[&>svg]:size-3.5", local.class)}85      {...others}86    >87      {local.children ?? <CheckIcon />}88    </CheckboxPrimitive.Indicator>89  );90}9192function CheckboxLabel(props: ComponentProps<typeof CheckboxPrimitive.Label>) {93  const [local, others] = splitProps(props, ["class"]);9495  return (96    <CheckboxPrimitive.Label97      data-slot="checkbox-label"98      class={cn(99        "text-sm leading-none font-medium select-none peer-disabled:opacity-50",100        local.class,101      )}102      {...others}103    />104  );105}106107const CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;108const CheckboxGroup = CheckboxPrimitive.Group;109const CheckboxContext = CheckboxPrimitive.Context;110const CheckboxRootProvider = CheckboxPrimitive.RootProvider;111112export {113  Checkbox,114  CheckboxRoot,115  CheckboxControl,116  CheckboxIndicator,117  CheckboxLabel,118  CheckboxHiddenInput,119  CheckboxGroup,120  CheckboxContext,121  CheckboxRootProvider,122};123