Checkbox

1"use client";23import * as React from "react";4import { Checkbox as CheckboxPrimitive } from "@sprawlify/react/checkbox";5import { cn } from "@/lib/utils";6import { CheckIcon, MinusIcon } from "lucide-react";78function Checkbox({9  className,10  children,11  ...props12}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {13  return (14    <CheckboxPrimitive.Root15      data-slot="checkbox"16      className={cn(17        "group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50",18        className,19      )}20      {...props}21    >22      <CheckboxPrimitive.Control23        data-slot="checkbox-control"24        className="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"25      >26        <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="[&>svg]:size-3.5">27          <CheckIcon />28        </CheckboxPrimitive.Indicator>29        <CheckboxPrimitive.Indicator30          data-slot="checkbox-indicator"31          className="[&>svg]:size-3.5"32          indeterminate33        >34          <MinusIcon />35        </CheckboxPrimitive.Indicator>36      </CheckboxPrimitive.Control>37      {children && (38        <CheckboxPrimitive.Label39          data-slot="checkbox-label"40          className="text-sm leading-none font-medium select-none peer-disabled:opacity-50"41        >42          {children}43        </CheckboxPrimitive.Label>44      )}45      <CheckboxPrimitive.HiddenInput />46    </CheckboxPrimitive.Root>47  );48}4950const CheckboxRoot = React.forwardRef<51  HTMLLabelElement,52  React.ComponentProps<typeof CheckboxPrimitive.Root>53>(({ className, ...props }, ref) => (54  <CheckboxPrimitive.Root55    ref={ref}56    data-slot="checkbox"57    className={cn(58      "group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50",59      className,60    )}61    {...props}62  />63));64CheckboxRoot.displayName = "CheckboxRoot";6566const CheckboxControl = React.forwardRef<67  HTMLDivElement,68  React.ComponentProps<typeof CheckboxPrimitive.Control>69>(({ className, ...props }, ref) => (70  <CheckboxPrimitive.Control71    ref={ref}72    data-slot="checkbox-control"73    className={cn(74      "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",75      className,76    )}77    {...props}78  />79));80CheckboxControl.displayName = "CheckboxControl";8182const CheckboxIndicator = React.forwardRef<83  HTMLDivElement,84  React.ComponentProps<typeof CheckboxPrimitive.Indicator>85>(({ className, children, ...props }, ref) => (86  <CheckboxPrimitive.Indicator87    ref={ref}88    data-slot="checkbox-indicator"89    className={cn("[&>svg]:size-3.5", className)}90    {...props}91  >92    {children ?? <CheckIcon />}93  </CheckboxPrimitive.Indicator>94));95CheckboxIndicator.displayName = "CheckboxIndicator";9697const CheckboxLabel = React.forwardRef<98  HTMLSpanElement,99  React.ComponentProps<typeof CheckboxPrimitive.Label>100>(({ className, ...props }, ref) => (101  <CheckboxPrimitive.Label102    ref={ref}103    data-slot="checkbox-label"104    className={cn(105      "text-sm leading-none font-medium select-none peer-disabled:opacity-50",106      className,107    )}108    {...props}109  />110));111CheckboxLabel.displayName = "CheckboxLabel";112113const CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;114115const CheckboxGroup = CheckboxPrimitive.Group;116117const CheckboxContext = CheckboxPrimitive.Context;118const CheckboxRootProvider = CheckboxPrimitive.RootProvider;119120export {121  Checkbox,122  CheckboxRoot,123  CheckboxControl,124  CheckboxIndicator,125  CheckboxLabel,126  CheckboxHiddenInput,127  CheckboxGroup,128  CheckboxContext,129  CheckboxRootProvider,130};131