The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| import { Checkbox as CheckboxPrimitive } from "radix-ui" |
| 6 |
| 7 | import { cn } from "../lib/utils" |
| 8 |
| 9 | function Checkbox({ |
| 10 | className, |
| 11 | ...props |
| 12 | }: React.ComponentProps<typeof CheckboxPrimitive.Root>) { |
| 13 | return ( |
| 14 | <CheckboxPrimitive.Root |
| 15 | data-slot="checkbox" |
| 16 | className={cn( |
| 17 | "peer relative flex size-4 shrink-0 items-center justify-center rounded-[6px] border border-input outline-none transition-[transform,background-color,border-color,box-shadow] duration-150 ease-out after:absolute after:-inset-x-3 after:-inset-y-2 hover:border-foreground/30 active:scale-[0.88] group-has-disabled/field:opacity-50 focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100 aria-invalid:border-destructive aria-invalid:ring-[3px] 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 data-checked:shadow-[0_0_0_2px_color-mix(in_oklab,var(--primary)_18%,transparent)] dark:data-checked:bg-primary motion-reduce:transition-none", |
| 18 | className |
| 19 | )} |
| 20 | {...props} |
| 21 | > |
| 22 | <CheckboxPrimitive.Indicator |
| 23 | data-slot="checkbox-indicator" |
| 24 | className="grid place-content-center text-current data-[state=checked]:animate-in data-[state=checked]:zoom-in-75 data-[state=checked]:fade-in data-[state=checked]:duration-150 data-[state=checked]:ease-out motion-reduce:animate-none [&>svg]:size-3.5" |
| 25 | > |
| 26 | <IconCheck /> |
| 27 | </CheckboxPrimitive.Indicator> |
| 28 | </CheckboxPrimitive.Root> |
| 29 | ) |
| 30 | } |
| 31 |
| 32 | export { Checkbox } |
| 33 |
