46 lines
1.5 KiB
TypeScript
46 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-in-out disabled:cursor-not-allowed disabled:text-opacity-30'
|
|
);
|
|
|
|
export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> &
|
|
VariantProps<typeof variants> & { readonly loading: boolean };
|
|
|
|
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
|
({ className, loading, ...props }, ref) => {
|
|
if (loading) return <div className="h-3 w-full animate-pulse rounded bg-gray-100" />;
|
|
|
|
return (
|
|
<div className="flex items-center">
|
|
<input ref={ref} type="checkbox" className={cn(variants({ className }))} {...props} />
|
|
</div>
|
|
);
|
|
}
|
|
);
|