44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
import { clsx } from 'clsx';
|
|
import { Check } from 'lucide-react';
|
|
|
|
export interface CheckboxProps extends React.ComponentPropsWithoutRef<
|
|
typeof CheckboxPrimitive.Root
|
|
> {
|
|
label?: React.ReactNode;
|
|
}
|
|
|
|
export const Checkbox = React.forwardRef<
|
|
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
|
CheckboxProps
|
|
>(({ label, className, id, ...props }, ref) => {
|
|
const generatedId = React.useId();
|
|
const checkboxId = id ?? (label ? `checkbox-${generatedId}` : undefined);
|
|
|
|
return (
|
|
<label className="inline-flex items-center gap-2 text-sm text-[var(--bl-text-primary)]">
|
|
<CheckboxPrimitive.Root
|
|
ref={ref}
|
|
id={checkboxId}
|
|
className={clsx(
|
|
'flex h-4 w-4 items-center justify-center rounded border border-[var(--bl-border)] bg-[var(--bl-surface-card)]',
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bl-accent)]',
|
|
'data-[state=checked]:border-[var(--bl-accent)] data-[state=checked]:bg-[var(--bl-accent)] data-[state=checked]:text-[var(--bl-accent-foreground,var(--bl-bg-canvas))]',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<CheckboxPrimitive.Indicator>
|
|
<Check className="h-3 w-3" />
|
|
</CheckboxPrimitive.Indicator>
|
|
</CheckboxPrimitive.Root>
|
|
{label}
|
|
</label>
|
|
);
|
|
});
|
|
|
|
Checkbox.displayName = 'Checkbox';
|