MicroClub Checkbox

1'use client';
2 
3import * as React from 'react';
4import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
5import { cva, type VariantProps } from 'class-variance-authority';
6import { CheckIcon } from 'lucide-react';
7 
8import { cn } from '@/lib/utils';
9 
10const checkboxVariants = cva(
11  'peer relative flex shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
12  {
13    variants: {
14      size: {
15        sm: 'size-4 [&_[data-slot=checkbox-indicator]>svg]:size-3',
16        md: 'size-5 [&_[data-slot=checkbox-indicator]>svg]:size-3.5',
17      },
18    },
19    defaultVariants: {
20      size: 'sm',
21    },
22  }
23);
24 
25const textVariants = cva('font-medium transition-colors', {
26  variants: {
27    size: {
28      sm: 'text-sm',
29      md: 'text-base',
30    },
31    disabled: {
32      true: 'text-muted-foreground',
33      false: 'text-foreground',
34    },
35  },
36  defaultVariants: {
37    size: 'sm',
38    disabled: false,
39  },
40});
41 
42const supportTextVariants = cva('font-regular', {
43  variants: {
44    size: {
45      sm: 'text-sm',
46      md: 'text-base',
47    },
48  },
49  defaultVariants: {
50    size: 'sm',
51  },
52});
53 
54export interface McCheckboxProps
55  extends CheckboxPrimitive.Root.Props, VariantProps<typeof checkboxVariants> {
56  text?: string;
57  supportText?: string;
58}
59 
60function McCheckbox({
61  className,
62  size = 'sm',
63  text,
64  supportText,
65  id,
66  disabled,
67  checked,
68  onCheckedChange,
69  ...props
70}: McCheckboxProps) {
71  const checkboxId = React.useId();
72  const finalId = id ?? checkboxId;
73  const labelId = text ? `${finalId}-label` : undefined;
74  const descriptionId = supportText ? `${finalId}-description` : undefined;
75 
76  return (
77    <label
78      htmlFor={finalId}
79      className={cn(
80        'inline-flex',
81        size === 'sm' ? 'gap-2' : 'gap-3',
82        supportText ? 'items-start' : 'items-center',
83        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
84        className
85      )}
86    >
87      <CheckboxPrimitive.Root
88        id={finalId}
89        data-slot="checkbox"
90        className={cn(
91          checkboxVariants({ size }),
92          'self-start mt-0.5',
93          'bg-primary-foreground border-muted-foreground',
94          'hover:border-primary',
95          'focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring',
96          'focus-within:outline-none focus-within:ring-4 focus-within:ring-ring',
97// … truncated