45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { cn } from './utils';
|
|
import type { VariantProps } from 'class-variance-authority';
|
|
import { cva } from 'class-variance-authority';
|
|
import { forwardRef } from 'react';
|
|
|
|
const labelVariants = cva('ml-2 text-sm font-medium text-gray-900', {
|
|
defaultVariants: {
|
|
intent: 'default',
|
|
},
|
|
variants: {
|
|
intent: {
|
|
default: '',
|
|
disabled: 'cursor-not-allowed',
|
|
},
|
|
},
|
|
});
|
|
|
|
type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & VariantProps<typeof labelVariants>;
|
|
|
|
const Label = forwardRef<HTMLLabelElement, LabelProps>(
|
|
({ className, intent, title, ...props }, ref) => (
|
|
<label className={cn(labelVariants({ className, intent }))} ref={ref} {...props}>
|
|
{title}
|
|
</label>
|
|
)
|
|
);
|
|
|
|
const variants = cva(
|
|
'w-4 h-4 focus:ring-transparent rounded-sm hover:border-primary-500 disabled:hover:border-gray-300 border-gray-300 text-sm text-primary outline-none transition-all ease-linear hover:transition-all focus:transition-all disabled:cursor-not-allowed disabled:text-opacity-30'
|
|
);
|
|
|
|
export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
|
|
VariantProps<typeof variants>;
|
|
|
|
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
|
({ className, title, ...props }, ref) => (
|
|
<div className="flex items-center">
|
|
<input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
|
|
{title && (
|
|
<Label intent={props.disabled ? 'disabled' : 'default'} htmlFor={props.id} title={title} />
|
|
)}
|
|
</div>
|
|
)
|
|
);
|