mirror of
https://github.com/documenso/documenso.git
synced 2025-11-14 00:32:43 +10:00
9d83bda12c
Checkboxes were previously styled super wonky due to the usage of checkboxClassName which styled the checkbox trigger. This change reverts all that and leaves it with sensible defaults across dark and light mode.
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
|
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
import { Check } from 'lucide-react';
|
|
|
|
import { cn } from '../lib/utils';
|
|
|
|
const Checkbox = React.forwardRef<
|
|
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
|
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
|
|
checkClassName?: string;
|
|
}
|
|
>(({ className, checkClassName, ...props }, ref) => (
|
|
<CheckboxPrimitive.Root
|
|
ref={ref}
|
|
className={cn(
|
|
'border-input bg-background ring-offset-background focus-visible:ring-ring data-[state=checked]:border-primary data-[state=checked]:bg-primary peer h-4 w-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<CheckboxPrimitive.Indicator
|
|
className={cn('text-primary-foreground flex items-center justify-center', checkClassName)}
|
|
>
|
|
<Check className="h-3 w-3 stroke-[3px]" />
|
|
</CheckboxPrimitive.Indicator>
|
|
</CheckboxPrimitive.Root>
|
|
));
|
|
|
|
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
|
|
export { Checkbox };
|