Initial commit

app/src/components/ui/checkbox.tsx

@@ -0,0 +1,44 @@
+import { Check } from 'lucide-react';
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface CheckboxProps {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+}
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ checked = false, onCheckedChange, disabled = false, className, id, ...props }, ref) => {
+    return (
+      <button
+        type="button"
+        ref={ref}
+        id={id}
+        role="checkbox"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => {
+          if (!disabled && onCheckedChange) {
+            onCheckedChange(!checked);
+          }
+        }}
+        className={cn(
+          'h-4 w-4 rounded border-2 flex items-center justify-center shrink-0 transition-colors',
+          checked ? 'bg-accent border-accent' : 'border-muted-foreground/30',
+          disabled && 'opacity-50 cursor-not-allowed',
+          !disabled && 'cursor-pointer',
+          className,
+        )}
+        {...props}
+      >
+        {checked && <Check className="h-3 w-3 text-accent-foreground" />}
+      </button>
+    );
+  },
+);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };